<button>标签有什么缺点？
我开始使用诊断的CSS样式表，例如http://snipplr.com/view/6770/css-diagnostics–highlight-deprecated-html-with-css–more/
其中一条build议规则突出显示了types为submit的input标签，build议使用<button>作为更多的语义解决scheme。 这对我来说是一个新的标签，你们推荐它，还是有你遇到的缺点（如与浏览器兼容）？
为了清楚起见，我了解<button>的规范，它有一个定义的开始和结束，它可以包含各种元素，而input是一个单独的，不能包含的东西。 我想知道的基本是它是否坏了。 所以，尽pipe以前从来没有用过，但我很乐意开始使用它，我只是不知道它在现实世界中的效果如何。 下面的第一个答案似乎暗示，除了forms之外，它的用途已经被破坏，不幸的是。
编辑2015年
风景已经改变了！ 我现在有6年多的处理button的经验，而且浏览器从IE6和IE7有所转移。 所以我会添加一个答案，详细介绍了我发现的和我的build议。
从ASP.NETangular度回答。
当我发现这个问题和一个ModernButton控件的代码时，我感到非常兴奋，最后，它是一个<button>控件。
所以我开始添加各种这些button，里面装饰着<img />标签，使它们脱颖而出。 这一切都很好，在Firefox和Chrome。
然后，我尝试了IE6，并得到了“一个潜在的危险的Request.Form值被检测到”，因为IE6提交button内的HTML，在我的情况下，它有HTML标签。 我不想禁用validateRequest标志，因为我喜欢这个额外的数据validation。
所以然后我写了一些JavaScript来禁用该button提交之前发生。 在一个testing页面上工作得很好，只有一个button，但是当我在一个真正的页面上testing时，有其他的<button>标签，它再次爆炸。 因为IE6提交了所有的button的HTML。 所以现在我有各种代码来提交之前禁用button。
与IE7同样的问题。 IE8幸好有这个固定的。
让人惊讶。 如果您使用ASP.NET，我build议不要走这条路。
更新：
我发现那里看起来很有希望解决这个问题的图书馆。
如果您使用此库中的ie8.js脚本： http : //code.google.com/p/ie7-js/
这可能会工作得很好。 IE8.js通过IE8带来的button标签带来了IE5-7的速度。 它使提交的值成为实际值，只有一个button被提交。
当使用<button>总是指定types，因为浏览器默认为不同的types。
这将在所有浏览器中一致地工作：
-
<button type="submit">...</button> -
<button type="button">...</button>
这样你就可以获得所有<button>的好处，没有缺点。
你需要知道的一切： W3Schools <button>标签
所有主stream浏览器都支持该标签。
重要提示：如果您在HTML表单中使用button元素，则不同的浏览器将提交不同的值。 Internet Explorer将在
<button>和</button>标签之间提交文本，而其他浏览器将提交value属性的内容。 使用input元素在HTML表单中创buildbutton。
优点：
- 显示标签不必与提交的值相同。 非常适合i18n和“删除此行”
- 您可以包含
<em>和<img>等标记
缺点：
- 一些版本的MSIE默认为
type="button"而不是type="submit"所以你必须明确 - 某些版本的MSIE将把所有的
<button>视为成功，所以你不能说出在多重提交button表单中点击了哪一个 - MSIE的某些版本将提交显示文本而不是实际值
需要注意的一个重要的怪癖：在包含<button/>元素的表单中，当单击<button/>元素时，IE6和IE7不会提交表单。 另一方面，其他浏览器将提交表单。
相比之下，当<input type="button"/>或者<button type="button"/>元素被点击时，没有浏览器会提交表单。 自然，所有浏览器都会在<input type="submit"/>或<button type="submit"/>元素被点击时<button type="submit"/> 。
正如@ orip的回答所说，为了在浏览器中获得一致的提交行为，请在<form/>元素中使用<button type="button" />或<button type="submit" /> 。 切勿忽略type属性。
它是否破碎：
像往常一样，答案是“ 在所有主stream浏览器中都能正常工作，但在IE中有以下几个怪癖： ”我认为这对你来说不是问题。
所有主stream浏览器都支持<button>标签。 唯一的支持问题在于Internet Explorer在按下button时提交的内容。
主要浏览器将提交值属性的内容。 互联网exploter将提交<button>和</button>标签之间的文本，同时也提交表单中的其他每个人的价值，而不是你单击的那个。
出于您的目的，只是清理旧的HTML，这不应该是一个问题。
资料来源：
现在我已经有了<button>怪癖的一些经验，6年后，所以这里是我的build议：
-
如果您仍然支持IE6或IE7 ，请小心使用button，这些浏览器的行为是非常错误的，在某些情况下，提交innerHtml而不是value ='whatever'，并且所有的button值而不是只有一个那。 因此，彻底testing或避免为了浏览器的缘故。
-
否则：如果你仍然支持IE8 ，
<a href='http://example.com'><button></button></a>不能正常工作，可能还有其他任何你嵌套button在一个可点击的元素内。 所以小心那个 -
否则：如果你主要使用一个
<button>作为一个元素来点击你的javascript，而且它不在窗体中，那么把它做成<button type='button'>，你可能会好起来的！ -
否则：如果你在表单中使用
<button>，在（大多数）情况下，要小心默认的<button><button type='submit'>实际上是<button type='submit'>，所以要明确你的types和你的value，如：<button type='submit' value='1'>Search</button>。
请注意：使用类似Bootstrap的.btn这样的button模仿类，可以让您像<div>或<a>甚至<button>一样按照您希望的方式进行查看，而对于<a>有一个更有用的后备行为。 不错的select。
TLDR; 好吧，如果你不关心古代浏览器，但Bootstrap提供更强大的CSS视觉上类似的select值得研究。
以下是一个解释不同之处的网站： http : //www.javascriptkit.com/howto/button.shtml
基本上，input标签只允许文本（虽然你可以使用背景图片），而button则允许你添加图像，表格，div等等。 而且，它不需要嵌套在表单标签中。
你也可能遇到这些问题：
- jQuery不能定位button（不是jQuery的错误，但是）： IE7中的<button>
- 多个请求variables，如果有> 1
<button>s： http : //www.peterbe.com/plog/button-tag-in-IE
另一件事与使用滑动门技术的样式相关：您需要插入另一个标签，例如<span>以使其工作。
就我而言，提交和button标签之间的区别是这样的：给你select不同的文本显示比元素的值
假设您有一个产品列表，然后在每个产品旁边有一个button将其添加到客户的购物车中：
product1 : <add to cart> product2 : <add to cart> product3 : <add to cart>
那么你可以这样做：
<button name="buy" type="submit" value="product2"> add to cart </button>
现在的问题是，IE将发送值=“添加到购物车”，而不是价值=“product2”
解决这个问题最简单的方法是添加onclick =“this.value ='product2'”
所以这：
<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>
将在所有主stream浏览器上诀窍 – 我已经实际上使用了多个button的forms，并与Chrome浏览器和IE浏览器
看起来像使用<button>主要原因是允许该button的CSS标记以及使用图像对button进行样式设置（请参阅： http : //www.javascriptkit.com/howto/button.shtml ）
不过，我认为在（X）HTML + CSS中看到的更多采用的方法是使用div，并将其与图像完全一致：hover伪类（模拟buttondownpress …不能添加多个链接每个答案，所以只是谷歌的“divbutton”，你会看到很多这样的例子），并使用JavaScript来做表单提交或AJAX调用…这也使得更有意义，如果你不使用HTML表单，并使用AJAX进行所有提交。
