我开始使用诊断css样式表，例如 http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/
建议的规则之一突出显示类型为submit的输入标记，建议使用<button>作为更具语义的解决方案。您遇到的<button>类型提交（例如浏览器兼容性）有哪些优缺点？
为了清楚起见，我理解<button>的规范，它有一个定义的开始和结束，它可以包含各种元素，而输入是一个单一的，不能包含东西。我最想知道的是它是否破碎。我想知道当前可用的按钮是多少。不幸的是，下面的第一个答案似乎暗示它已被打破，除了表格以外的用途。
2015年编辑
景观发生了变化！我现在有6年以上的处理按钮的经验，浏览器有点从IE6和IE7转移。所以我会添加一个答案，详细说明我发现的内容以及我建议的内容。
答案 0 :(得分：49)
使用<button>时始终指定类型，因为浏览器默认使用不同的类型。
这将在所有浏览器中保持一致：
<button type="submit">...</button> <button type="button">...</button> 这样你就可以获得所有<button>的优点，没有任何缺点。
答案 1 :(得分：17)
从ASP.NET角度回答。
当我找到this question和一些ModernButton控件的代码时，我很兴奋，最终，它是一个<button>控件。
所以我开始添加各种这些按钮，在其中加上<img />标签，以使它们脱颖而出。这一切都很有用......在Firefox和Chrome中。
然后我尝试了IE6并得到了“检测到一个潜在危险的Request.Form值”，因为IE6提交了按钮内部的html，在我的情况下，其中包含html标签。我不想禁用validateRequest标志，因为我喜欢这个额外的数据验证。
然后我在提交发生之前写了一些javascript来禁用该按钮。在一个测试页面上工作得很好，只有一个按钮，但当我在一个真实的页面上试用它时，它有其他<button>标签，它再次爆炸了。因为IE6提交了所有按钮的html。所以现在我有各种代码在提交之前禁用按钮。
与IE7相同的问题。 IE8谢天谢地解决了这个问题。
让人惊讶。如果您使用的是ASP.NET，我建议不要走这条路。
<强>更新
我找到了一个看起来很有希望解决这个问题的图书馆。
如果您使用此库中的ie8.js脚本：http://code.google.com/p/ie7-js/
它可能会很好。 IE8.js使用按钮标签的IE8加速IE5-7的速度。它使提交的值成为实际值，并且只提交一个按钮。
答案 2 :(得分：13)
您需要知道的一切：W3Schools <button> Tag
所有主流浏览器都支持该标记。
重要提示：如果您在HTML表单中使用button元素，则不同的浏览器将提交不同的值。 Internet Explorer将在
<button>和</button>标记之间提交文本，而其他浏览器将提交value属性的内容。使用input元素在HTML表单中创建按钮。
答案 3 :(得分：10)
优点：
<em>和<img> 缺点：
type="button"而非type="submit"，因此您必须明确<button>视为成功，因此您无法确定在多提交按钮表单中点击了哪一个来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button：
IE7有一个错误，当用Click Click提交表单时，发送的POST数据将导致myButton = Click me而不是myButton = foo。 IE6有一个更糟糕的错误，通过按钮提交表单将提交表单的所有按钮，与IE7相同的错误。 这个错误已在IE8中修复。
答案 4 :(得分：9)
需要注意的一个重要问题：在包含<button/>元素的表单中，IE6和IE7在单击<button/>元素时不会提交表单。另一方面，其他浏览器将提交表单。
相比之下，点击<input type="button"/>或<button type="button"/>元素时，任何浏览器都不会提交表单。当然，所有浏览器都会在点击<input type="submit"/>或<button type="submit"/>元素时提交表单。
正如@ orip的回答所说，为了在浏览器之间获得一致的提交行为，请始终在<button type="button" />元素中使用<button type="submit" />或<form/>。永远不要忽略type属性。
答案 5 :(得分：5)
我现在已经对<button>的怪癖有了一些经验，6年后，所以这是我的建议：
如果您仍然支持 IE6 或 IE7 ，请务必小心按钮，行为非常错误使用这些浏览器，在某些情况下提交innerHtml而不是value =＆＃39;无论什么＆＃39;和所有按钮值，而不是像这样的一个不稳定的行为。因此，请彻底测试或避免使用这些浏览器。
否则：如果您仍然支持 IE8 ，<a href='http://example.com'><button></button></a>无效，可能还有其他任何可以将按钮嵌入可点击内容的地方元件。所以要小心。
否则：如果您主要使用<button>作为点击您的javascript的元素，并且它在表单之外，请将其设为<button type='button'>并且你可能会很好！
否则：如果您在表单中使用<button>，请注意（大多数情况下）默认类型<button>实际上是<button type='submit'>，所以明确您的类型和value，例如：<button type='submit' value='1'>Search</button>。
请注意：使用按钮模拟类（如Bootstrap的.btn）可以让您只显示<div>或<a>甚至<button>之类的内容完全按照你想要的方式，在<a>的情况下有一个更有用的回退行为。不错的选择。
答案 6 :(得分：4)
是否破损：
像往常一样，答案是“它在所有主流浏览器中都能正常工作，但在IE中有以下怪癖。”我认为这不会对你造成任何问题。
所有主流浏览器都支持<button>标记。唯一的支持问题在于按下按钮后Internet Explorer将提交的内容。
主要浏览器将提交value属性的内容。互联网exploter将在<button>和</button>标记之间提交文字，同时还提交表单中每个其他标记的值，而不是您点击的标记。
出于您的目的，只需清理旧的HTML，这应该不是问题。
来源：
答案 7 :(得分：1)
这是一个解释差异的网站： http://www.javascriptkit.com/howto/button.shtml
基本上，输入标签只允许文本（虽然你可以使用背景图像），而按钮允许你添加图像，表格，div和其他任何东西。此外，它不要求它嵌套在表单标记中。
答案 8 :(得分：1)
您可能还会遇到这些问题：
<button> s：http://www.peterbe.com/plog/button-tag-in-IE 另一件事与使用sliding-door technique设置样式有关：您需要插入另一个标记，例如<span>让它发挥作用。
答案 9 :(得分：0)
就我而言，提交和按钮标签之间的区别是： 您可以选择显示与元素值
不同的文本假设您有一个产品列表，然后在每个产品旁边，您想要一个按钮将其添加到客户的购物车中：
product1 : <add to cart>
product2 : <add to cart>
product3 : <add to cart>
然后你可以这样做：
<button name="buy" type="submit" value="product2"> add to cart </button>
现在的问题是IE会发送带有value =“add to cart”的表单而不是value =“product2”
解决此问题的最简单方法是添加onclick =“this.value ='product2'”
所以这个：
<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>
将在所有主要浏览器上实现这一功能 - 我实际上在具有多个按钮的表单上使用此功能，并与Chrome Firefox和IE一起使用
答案 10 :(得分：-2)
看起来使用<button>的主要原因是允许该按钮的CSS标记以及使用图像设置按钮样式的能力:(参见此处：http://www.javascriptkit.com/howto/button.shtml）
然而，我认为我在（X）HTML + CSS中看到的更多采用的方法是使用div并使用图像完全设置样式并且：hover伪类（模拟按钮downpress ...无法添加每个答案不止一个链接，所以只需谷歌“div按钮”，你会看到很多这样的例子），并使用javascript进行表单提交或AJAX调用...如果你不使用这也更有意义HTML表单，并使用AJAX进行所有提交。