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

回答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

回答2:

You could always use Javascript, which works cross browser -

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

回答3:

You could try:

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

or putting the button in a form

回答4:

Cross Browser - works in MSIE 8 and FF 24+

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

回答5:

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

回答6:

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>

回答7:

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