CSS <button> 标签有什么缺点？

What disadvantages are there to the <button> tag?

提问by Kzqai

I started using a diagnostic css stylesheet, e.g. http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/

我开始使用诊断 css 样式表，例如 http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/

One of the suggested rules highlights input tags with the type submit, with the recommendation to use <button>as a more semantic solution. What are the advantages or disadvantages of <button>with type submit (such as with browser compatibility) that you have run across?

建议的规则之一突出显示类型为 submit 的输入标签，并建议将其<button>用作更具语义的解决方案。<button>您遇到过的with type submit（例如浏览器兼容性）有哪些优点或缺点？

Just to be clear, I understand the spec of <button>, it has a defined start and end, it can contain various elements, whereas input is a singlet and can't contain stuff. What I want to know essentially is whether it's broken or not. I'd like to know how usable button is at the current time. The first answer below does seem to imply that it is broken for uses except outside of forms, unfortunately.

为了清楚起见，我理解 的规范<button>，它有一个定义的开始和结束，它可以包含各种元素，而 input 是一个单线，不能包含东西。我想知道的基本上是它是否坏了。我想知道当前按钮的可用程度。不幸的是，下面的第一个答案似乎暗示它在除表单之外的用途中被破坏了。

Edit for 2015

2015年编辑

The landscape has changed! I have 6 more years experience of dealing with button now, and browsers have somewhat moved on from IE6 and IE7. So I'll add an answer that details what I found out and what I suggest.

风景变了！我现在有 6 年多的处理按钮的经验，浏览器已经从 IE6 和 IE7 转移了。所以我会添加一个答案，详细说明我的发现和我的建议。

采纳答案by slolife

Answering from an ASP.NET perspective.

从 ASP.NET 的角度回答。

I was excited when I found this questionand some code for a ModernButton control, which, in the end, is a <button>control.

当我发现这个问题和 ModernButton 控件的一些代码时，我很兴奋，它最终是一个<button>控件。

So I started adding all sorts of these buttons, decorated with <img />tags inside of them to make them stand out. And it all worked great... in Firefox, and Chrome.

所以我开始添加各种这些按钮，<img />在它们内部装饰有标签，使它们脱颖而出。这一切都很好……在 Firefox 和 Chrome 中。

Then I tried IE6 and got the "a potentially dangerous Request.Form value was detected", because IE6 submits the html inside of the button, which, in my case, has html tags in it. I don't want to disable the validateRequest flag, because I like this added bit of data validation.

然后我尝试了 IE6 并得到了“检测到一个潜在危险的 Request.Form 值”，因为 IE6 提交了按钮内的 html，在我的例子中，它有 html 标签。我不想禁用 validateRequest 标志，因为我喜欢这个添加的数据验证位。

So then I wrote some javascript to disable that button before the submit occurred. Worked great in a test page, with one button, but when I tried it out on a real page, that had other <button>tags, it blew up again. Because IE6 submits ALL of the buttons' html. So now I have all sorts of code to disable buttons before submit.

然后我写了一些 javascript 在提交发生之前禁用该按钮。在测试页面上用一个按钮效果很好，但是当我在一个有其他<button>标签的真实页面上尝试时，它又炸了。因为 IE6 提交所有按钮的 html。所以现在我有各种代码在提交之前禁用按钮。

Same problems with IE7. IE8 thankfully has this fixed.

IE7 也有同样的问题。IE8 谢天谢地有这个固定。

Yikes. I'd recommend not going down this road IF you are using ASP.NET.

哎呀。如果您使用的是 ASP.NET，我建议不要走这条路。

Update:

更新：

I found a library out there that looks promising to fix this.

我找到了一个看起来很有希望解决这个问题的图书馆。

If you use the ie8.js script from this library: http://code.google.com/p/ie7-js/

如果您使用此库中的 ie8.js 脚本：http: //code.google.com/p/ie7-js/

It might work out just fine. The IE8.js brings IE5-7 up to speed with IE8 with the button tag. It makes the submitted value the real value and only one button gets submitted.

它可能工作得很好。IE8.js 通过按钮标签使 IE5-7 与 IE8 同步。它使提交的值成为真正的值，并且只有一个按钮被提交。

回答by orip

When using <button>always specify the type, since browsers default to different types.

使用时<button>总是指定类型，因为浏览器默认为不同的类型。

This will work consistently across all browser:

这将在所有浏览器中一致工作：

• <button type="submit">...</button>
• <button type="button">...</button>

• <button type="submit">...</button>
• <button type="button">...</button>

This way you gain all of <button>'s goodness, no downsides.

这样你就获得了所有<button>的好处，没有缺点。

回答by David Brown

Everything you need to know: W3Schools <button>Tag

您需要知道的一切：W3Schools<button>标签

The tag is supported in all major browsers.

Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button>and </button>tags, while other browsers will submit the content of the value attribute. Use the inputelement to create buttons in an HTML form.

所有主要浏览器都支持该标签。

重要提示：如果您在 HTML 表单中使用 button 元素，不同的浏览器将提交不同的值。Internet Explorer 将提交<button>和</button>标签之间的文本，而其他浏览器将提交 value 属性的内容。使用该input元素在 HTML 表单中创建按钮。

回答by Quentin

Pros:

优点：

• The display label does not have to be the same as the submitted value. Great for i18n and "Delete this row"
• You can include markup such as <em>and <img>

• 显示标签不必与提交的值相同。非常适合 i18n 和“删除这一行”
• 您可以包含标记，例如<em>和<img>

Cons:

缺点：

• Some versions of MSIE default to type="button"instead of type="submit"so you have to be explicit
• Some versions of MSIE will treat all <button>s as successful so you can't tell which one was clicked in a multi-submit button form
• Some versions of MSIE will submit the display text instead of the real value

• 某些版本的 MSIE 默认为type="button"而不是，type="submit"因此您必须明确
• 某些版本的 MSIE 会将所有<button>s 视为成功，因此您无法分辨在多提交按钮表单中单击了哪个
• 某些版本的 MSIE 会提交显示文本而不是真实值

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button:

来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button：

IE7 has a bug where when submitting a form with Click me, the POST data sent will result in myButton=Click me instead of myButton=foo. IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7. This bug has been fixed in IE8.

IE7 有一个错误，当使用 Click me 提交表单时，发送的 POST 数据将导致 myButton=Click me 而不是 myButton=foo。IE6 有一个更糟糕的错误，即通过按钮提交表单将提交表单的所有按钮，与 IE7 的错误相同。此错误已在 IE8 中修复。

回答by Chris Calo

An important quirk to be aware of: In a form that contains a <button/>element, IE6 and IE7 will not submit the form when the <button/>element is clicked. Other browsers, on the other hand, will submit the form.

需要注意的一个重要怪癖：在包含<button/>元素的表单中，IE6 和 IE7 不会在<button/>单击元素时提交表单。另一方面，其他浏览器将提交表单。

In contrast, no browsers will submit the form when <input type="button"/>or <button type="button"/>elements are clicked. And naturally, all browsers will submit the form when <input type="submit"/>or <button type="submit"/>elements are clicked.

相比之下，当点击<input type="button"/>或<button type="button"/>元素时，没有浏览器会提交表单。自然地，所有浏览器都会在单击<input type="submit"/>或<button type="submit"/>元素时提交表单。

As @orip's answer says, to get consistent submit behavior across browsers, always use <button type="button" />or <button type="submit" />inside a <form/>element. Never leave out the typeattribute.

正如@orip 的回答所说，要在浏览器之间获得一致的提交行为，请始终使用<button type="button" />或<button type="submit" />在<form/>元素内。永远不要遗漏type属性。

回答by Kzqai

I've had some experience with the quirks of <button>now, 6 years later, so here are my suggestions:

<button>6 年后，我对现在的怪癖有了一些经验，所以这里是我的建议：

• If you're stillsupporting IE6or IE7, be very careful with button, the behavior is very buggy with those browsers, in some cases submitting the innerHtml instead of value='whatever' and all button values instead of just one and wonky behavior like that. So test thoroughly or avoid for those browser's sake.

• Otherwise: If you're still supporting IE8, <a href='http://example.com'><button></button></a>doesn't work well, and probably anything else where you nest a button inside a clickable element. So watch out for that.

• Otherwise: If you're using a <button>mainly as an element to click for your javascript, and it's outside of a form, make it <button type='button'>and you'll probably be just fine!

• Otherwise: If you're using <button>in a form, be wary that the default type of <button>is actually <button type='submit'>in (most) cases, so be explicit with your type and your value, like: <button type='submit' value='1'>Search</button>.

• 如果您仍然支持IE6或IE7，请非常小心按钮，这些浏览器的行为非常有问题，在某些情况下，提交 innerHtml 而不是 value='whatever' 和所有按钮值而不是一个和奇怪的行为，例如那。所以为了那些浏览器，彻底测试或避免。

• 否则：如果您仍然支持IE8，<a href='http://example.com'><button></button></a>则效果不佳，并且可能还有其他任何在可点击元素中嵌套按钮的地方。所以要注意这一点。

• 否则：如果您<button>主要使用 a作为元素来单击您的 javascript，并且它在表单之外，那么制作它<button type='button'>，您可能会没事！

• 否则：如果您<button>在表单中使用，请注意默认类型 of<button>实际上<button type='submit'>在（大多数）情况下，因此请明确您的类型和您的value，例如：<button type='submit' value='1'>Search</button>。

Note that: Using a button-mimic class, like Bootstrap's .btnallows you to just make things like <div>or <a>or even <button>look exactly the way you want it to, and in the case of <a>have a more useful fallback behavior. Not a bad option.

需要注意的是：使用一个按钮，模拟类，如引导的.btn允许你只会让事情像<div>或者<a>甚至<button>正好看你想让它的方式，在的情况下，<a>有一个更有用的备用行为。不错的选择。

TLDR; Ok to use if you don't care about ancient browsers, but Bootstrap provides even more robust css visually similar alternatives worth looking into.

TLDR；如果您不关心古老的浏览器，可以使用它，但是 Bootstrap 提供了更强大的 css 视觉上相似的替代方案，值得研究。

回答by Robert Kuykendall

Is it broken or not:

是不是坏了：

As usual, the answer is "it works fine in all major browsers, but has the following quirks in IE." I don't think it will be a problem for you though.

像往常一样，答案是“它在所有主要浏览器中都可以正常工作，但在 IE 中存在以下怪癖。”不过我认为这对您来说不是问题。

The <button>tag is supported by all the major browsers. The only support problem lies in what Internet Explorer will submit upon pressing a button.

<button>所有主要浏览器都支持该标签。唯一的支持问题在于按下按钮时 Internet Explorer 将提交什么。

The major browsers will submit the content of the value attribute. Internet exploter will submit the text between the <button>and </button>tags, while also submitting the value of every other one in the form, instead just the one you clicked.

各大浏览器都会提交 value 属性的内容。Internet exploter 将提交<button>和</button>标签之间的文本，同时还会提交表单中其他每一个的值，而不仅仅是您单击的那个。

For your purposes, just cleaning up old HTML, this shouldn't be a problem.

为了您的目的，只需清理旧的 HTML，这应该不是问题。

Sources:

资料来源：

1. http://www.peterbe.com/plog/button-tag-in-IE
2. http://www.w3schools.com/tags/default.asp

1. http://www.peterbe.com/plog/button-tag-in-IE
2. http://www.w3schools.com/tags/default.asp

回答by moey

You might also run into these problems:

您可能还会遇到以下问题：

• jQuery cannot target the button (not jQuery's fault, though): <button> in IE7
• Multiple request variables if there are >1 <button>s: http://www.peterbe.com/plog/button-tag-in-IE

• jQuery 无法定位按钮（虽然不是 jQuery 的错）：IE7 中的 <button>
• 多个请求变量，如果大于 1<button>秒：http: //www.peterbe.com/plog/button-tag-in-IE

Another thing is related to styling it using the sliding-door technique: you need to insert another tag e.g. <span>to make it work.

另一件事与使用滑动门技术对其进行样式设置有关：您需要插入另一个标签，例如<span>使其工作。

回答by Chris Haas

Here's a site that explains the differences: http://www.javascriptkit.com/howto/button.shtml

这是一个解释差异的网站：http: //www.javascriptkit.com/howto/button.shtml

Basically, the input tag allows just text (although you can use a background image) while the button allows you to add images, tables, divs and whatever else. Also, it doesn't require it to be nested within a form tag.

基本上，输入标签只允许文本（尽管您可以使用背景图像），而按钮允许您添加图像、表格、div 和其他任何内容。此外，它不需要将它嵌套在表单标签中。

回答by George Panic

as far as I am concerned the difference between submit and button tags is this: gives you the option to have different text displayed than the element's value

就我而言，提交和按钮标签之间的区别在于：让您可以选择显示与元素值不同的文本

Let's say you have a list of products then next to each product you want a button to add it to the customer's cart:

假设您有一个产品列表，然后在每个产品旁边有一个按钮将其添加到客户的购物车：

product1 : <add to cart>
product2 : <add to cart>
product3 : <add to cart>

then you could do this:

那么你可以这样做：

<button name="buy" type="submit" value="product2"> add to cart </button>

Now the problem is that IE will send the form with value="add to cart" instead of value="product2"

现在的问题是 IE 将发送带有 value="add to cart" 而不是 value="product2" 的表单

The easiest way to workaroound this issue is by adding onclick="this.value='product2'"

解决此问题的最简单方法是添加 onclick="this.value='product2'"

So this:

所以这：

<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>

will do the trick on all major browsers - I have actually used this on a form with multiple buttons and works with Chrome Firefox and IE

将在所有主要浏览器上实现这一点 - 我实际上已经在具有多个按钮的表单上使用了它，并且可以与 Chrome Firefox 和 IE 一起使用