<button> not working in IE8

Question

I have a number of buttons on my website using the button tag, and while rendering fine on IE8, they are not clickable (clicking them doesn't send the user to the new url). Are there any solutions to fix this for IE? Is it because I'm wrapping the button in an tag? Is it because I'm using a class name of "button"?

The code is:

<a href="product_home.html">
<button class="button green big_button">Learn more</button>
</a> 

Answer 1

Your markup is wrong, IE is not in fault here. Button is a form element which means that it requires a form around it point where the user should be sent - wrapping the button into a link tag isn't enough nor exactly valid, in fact I don't think it should work anywhere, not even in other browsers.

To read more about correct usage of <button/>, visit XHTML Reference: button

Answer 2

You could try:

<a href="product_home.html" class="button green big_button">Learn more</a> 

or putting the button in a form

Answer 3

See my other answer; I think this is a modern jQuery-based approach to patching this issue for old IEs, without mangling your nice clean markup.

<!--[if lt IE 9]>

<script type="text/javascript">
// IE8 is the new IE6. Patch up https://stackoverflow.com/questions/2949910/how-to-make-href-will-work-on-button-in-ie8
$('button').click(function(){
    document.location = $(this).parents('a').first().prop('href');
});
</script>

<![endif]-->

Answer 4

<a href="product_home.html">
<div class="button green big_button">Learn more</div>
</a> 

Answer 5

Cross Browser - works in MSIE 8 and FF 24+

<button onclick="location.href='myscript.php?id=$ID'" type="button">MyLink</button>.

Answer 6

You could always use Javascript, which works cross browser -

<button onclick="location.href='http://www.google.com'">This is a button to google</button>