<button> 在 IE8 中不起作用答案

【问题标题】：<button> not working in IE8<button> 在 IE8 中不起作用
【发布时间】：2011-08-15 05:55:42
【问题描述】：

我的网站上有许多使用按钮标签的按钮，虽然在 IE8 上呈现良好，但它们不可点击（点击它们不会将用户发送到新网址）。有什么解决方案可以为 IE 解决这个问题吗？是因为我将按钮包装在标签中吗？是因为我使用了“按钮”的类名吗？

代码是：

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

【问题讨论】：

Button inside of anchor link works in Firefox but not in Internet Explorer? 的可能重复项

标签： html button internet-explorer-8 tags

【解决方案1】：

你的标记是错误的，这里不是 IE 的错误。按钮是一个表单元素，这意味着它需要一个表单围绕它应该发送用户的点 - 将按钮包装到链接标签中是不够的，也不完全有效，事实上我认为它不应该在任何地方工作，而不是即使在其他浏览器中。

要了解更多关于<button/>的正确用法，请访问XHTML Reference: button

【讨论】：

这里似乎没有真正的共识（尤其是基于 Joe 上面引用的线程）。另外，根据 W3C，按钮周围的链接似乎是可以的。
一旦我使用表单包装
我 /just/ 遇到了一个问题，有时，如果您有，有时它会提交 'action=等等'..或'action = blah2'。没有任何线索为什么，它只是为这个需要我很长时间才能修复的应用程序。我在 ie8 之后的任何其他浏览器中都没有看到这种行为。
它适用于IE9和所有版本的Chrome，所以这个答案措辞过于苛刻。最好明确地回答链接中的按钮是否是好的做法。就我而言，我不需要任何表单，我只需要一个看起来像按钮并导航到新页面的东西。

【解决方案2】：

您始终可以使用跨浏览器工作的 Javascript -

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

【讨论】：

这对我有用。其他选项不起作用，因为（1）样式在“div”和“a”标签中出现不同（2）“div”标签不能像按钮那样放置在文本中间，以及（3） 'a'标签在长文本上换行，样式以一种奇怪的方式换行，（4）'form'标签也不能放在文本中间。
内联 JavaScript 总是那么可悲和可以避免。 stackoverflow.com/questions/19002690/…

【解决方案3】：

你可以试试：

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

或将按钮放入表单中

【讨论】：

谢谢，我正在使用 Twitter Bootstrap，只需删除按钮并将类应用到 a 标签就是 IE8 所需的全部内容。

【解决方案4】：

跨浏览器 - 适用于 MSIE 8 和 FF 24+

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

【讨论】：

【解决方案5】：

见my other answer;我认为这是一种基于 jQuery 的现代方法，可以为旧 IE 修补此问题，而不会破坏您漂亮的干净标记。

<!--[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】：

示例用法：

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

【讨论】：