html - Button link doesn't work in Firefox, IE

Question

I have links inside of that work fine in Chrome, but not IE or Firefox. Nothing happens if you click on them. I've messed with the CSS (z-index included), but am out of ideas. This is XHTML coming out of Drupal.

The 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 for where I can look?

Answer 1

The HMTL syntax does not allow an a element within a button element, so it is not surprising that it does not work across browsers. There should be no reason to use such a construct, since you can either style a link to look like a button or associate an action with a button, depending on what you wish to accomplish.