<button> not working in IE8

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 t开发者_运维百科his 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> 

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

You could always use Javascript, which works cross browser -

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

You could try:

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

or putting the button in a form

Cross Browser - works in MSIE 8 and FF 24+

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

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]-->

sample usage:

<form id="myform" name="myform" action="product_home.html">
  <input id="user" name="user" type="text" value="" />
  <button class="button green big_button" type="submit">Learn more</button>
  <button class="button green big_button" type="reset"><b>reset the form!</b></button>
</form>

<script type="text/javascript">

var myform = document.getElementById('myform');

myform.onsubmit = function()
{
    alert(myform.user.value); 
if (myform.user.value != '') return true;
    return false;
}

</script>

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