All geek questions in one place

Button link does not work in Firefox, IE

I have links inside this work in Chrome, but not in IE or Firefox. Nothing happens if you click on them. I was messing around with CSS (including z-index), but I'm not in ideas. This is XHTML coming out of Drupal.

html looks like this:

<div class="product-display-block-link"> <button> <a href="/checkout/outfield-banner/1">Add to cart</a> </button> </div>

Any suggestions on where I can look?

+4
source share
4 answers

The HMTL syntax does not allow the a element in the button element, so it is not surprising that it does not work in different browsers. There should be no reason to use such a design, since you can either create a link to look like a button, or associate an action with a button, depending on what you want to perform.

+12
source

If you want a button (that is, a thing to submit a form with or collapse JavaScript), use the button. If you want a link, use the link. If you want the link to look like a button, use the link and then create it to look the way you want.

You cannot mix them, because <button> elements cannot contain <a> elements. element definition explicitly excludes them:

 <!-- Content is %Flow; excluding a, form and form controls --> <!ELEMENT button %button.content;> <!-- push button --> <!ENTITY % button.content "(#PCDATA | p | %heading; | div | %lists; | %blocktext; | table | %special; | %fontstyle; | %phrase; | %misc;)*">
+3
source

<button> not used correctly.

HTML:

  <div class="product-display-block-link"> <button onClick="javascript: window.location='/checkout/outfield-banner/1'">Add to Cart</button> </div>

See here: http://jsfiddle.net/s8jtf/

+1
source

In addition, the type attribute is missing. Different browsers assume a different type, for example, optionally type = "submit".

-1
source

Source: https://habr.com/ru/post/1389829/

More articles:


All Articles