Html 为什么 <button> 元素不能包含 <div>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15885444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why can't a <button> element contain a <div>?
提问by TFennis
My company is building a website and we had some problems with a JavaScript library not replacing something. We decided to throw our HTML in to the W3C validator and it informed us it's illegal to have a <div>tag inside a <button>tag.
我的公司正在构建一个网站，我们在 JavaScript 库中遇到了一些问题，无法替换某些内容。我们决定将我们的 HTML 放入 W3C 验证器，它告诉我们在<div>标签中包含<button>标签是非法的。
<button class="button" type="submit">
<div class="buttonNormalLargeLeft"><!--#--></div>
<div class="buttonNormalLargeCenter">Search Flights</div>
<div class="buttonNormalLargeRight"><!--#--></div>
</button>
Results in:
结果是：
Line 287, Column 46: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
Edit: To clarify what we're trying to do here. We want to make a button with rounded corners that doesn't rely on box-radius. We made 3 divs in the button element each has his own sprite to make it appear rounded and allow for different widths. Other resources state that the button element was created for users that wanted a button to contain sub elements such as images but divs appear to be invalid for some reason.
编辑：澄清我们在这里尝试做的事情。我们想要制作一个不依赖于box-radius. 我们在按钮元素中制作了 3 个 div，每个 div 都有自己的精灵，使其看起来是圆形的，并允许不同的宽度。其他资源指出，按钮元素是为希望按钮包含子元素（例如图像）但 div 由于某种原因无效的用户创建的。
Why are divs not allowed inside button elements?
为什么按钮元素中不允许使用 div？
What is the desired solution to this issue?
这个问题的理想解决方案是什么？
Edit2:
编辑2：
Why not use input? Because inputs can't have the desired layout
为什么不使用输入法？因为输入不能具有所需的布局
Why not use divs? Because users without JavaScript won't be able to submit the form.
为什么不使用div？因为没有 JavaScript 的用户将无法提交表单。
回答by Jlange
If you want to use a custom button, you'll have to replace the button tag with a div or an input. It looks like a div is what you want in this case. You'll just have to add any necessary event handlers, (for your submit).
如果要使用自定义按钮，则必须用 div 或输入替换按钮标记。在这种情况下，看起来 div 正是您想要的。您只需要添加任何必要的事件处理程序（用于提交）。
Thismight help clarify things a bit.
这可能有助于澄清一些事情。
回答by Wild Beard
Well I posted a comment but no love.
好吧，我发表了评论，但没有爱。
You can achieve a W3C valid button by simply putting an image inside the button.
您可以通过简单地在按钮内放置图像来实现 W3C 有效按钮。
Fiddle
小提琴
Granted you'll have to create your images and add the text to them. But since you've already created images for the corners that shouldn't be too hard.
当然，您必须创建图像并向其中添加文本。但是因为您已经为角落创建了图像，所以应该不会太难。
Also image spritesare a great thing.
也像精灵是一个伟大的事情。
.test {
width: 258px;
height: 48px;
background: none;
border: 1px solid transparent;
}
.test:active {
outline: 0;
}
.test > img {
width: 258px;
height: 45px;
opacity: 1;
background: url('http://www.copygirlonline.com/wp-content/plugins/maxblogpress-subscribers-magnet/lib/include/popup1/images/btn/blue-button.png');
background-position: -3px 0px;
}
.test > img:hover {
background-position: -3px -50px;
}<button class="test">
<img src="http://alistapart.com/d/cssdropshadows/img/shadowAlpha.png" />
</button>If you want to stick with 3 images here's an updated version.
如果你想坚持使用 3 张图片，这里有一个更新的版本。
button {
margin: 0;
padding: 0;
border: none;
}<button>
<img src="http://placehold.it/50x50" /><img src="http://placehold.it/50x50" /><img src="http://placehold.it/50x50" />
</button>Also, without additional CSS, it seems you need to keep all of the <img />tags on the same line or it treats the images as having space between them.
此外，如果没有额外的 CSS，您似乎需要将所有<img />标签保持在同一行上，否则它会将图像视为它们之间有空间。
回答by Jonathan
If you're using a form, you could change the button to be a clickable div instead. For example:
如果您使用的是表单，则可以将按钮更改为可点击的 div。例如：
<div role="button" onclick="$(this).closest('form').submit()">
<!-- your child content here -->
</div>
Alternatively, if you know the form name or ID you could change the inline javascript to something like document.getElementById("form-id").submit()
或者，如果您知道表单名称或 ID，您可以将内联 javascript 更改为类似 document.getElementById("form-id").submit()
