为什么 <button> 元素不能包含 <div>？

Question

我的公司正在建立一个网站，我们在 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>

结果是：

 Line 287, Column 46: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)

编辑：澄清我们在这里要做的事情。我们想制作一个不依赖于 box-radius 的圆角按钮。我们在按钮元素中制作了 3 个 div，每个 div 都有自己的 sprite，使它看起来圆润并允许不同的宽度。其他资源指出按钮元素是为希望按钮包含图像等子元素的用户创建的，但由于某种原因 div 似乎无效。

为什么按钮元素内不允许使用 div？

这个问题的理想解决方案是什么？

编辑2：

为什么不使用输入法？因为输入不能有所需的布局

为什么不用div？因为没有 JavaScript 的用户将无法提交表单。

原文由 TFennis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好吧，我发表了评论，但没有爱。

您只需将图像放入按钮内即可获得 W3C 有效按钮。

小提琴

当然，您必须创建图像并向其中添加文本。但由于您已经为不应该太难的角创建了图像。

图像精灵 也是一件好事。

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

如果你想坚持使用 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>

此外，如果没有额外的 CSS，您似乎需要将所有 <img /> 标签保留在同一行，否则它将图像视为在它们之间有空间。

原文由 Wild Beard 发布，翻译遵循 CC BY-SA 4.0 许可协议