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

【问题标题】：Why can't a <button> element contain a <div>?为什么 <button> 元素不能包含 <div>？
【发布时间】：2013-03-30 21:49:32
【问题描述】：

我的公司正在建立一个网站，但我们遇到了一些问题，即 JavaScript 库无法替换某些东西。我们决定将我们的 HTML 提交给 W3C 验证器，它告诉我们在 <button> 标记中包含 <div> 标记是非法的。

<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 都有自己的精灵，以使其看起来是圆形的并允许不同的宽度。其他资源指出，按钮元素是为希望按钮包含子元素（例如图像）的用户创建的，但由于某种原因 div 似乎无效。

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

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

编辑2：

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

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

【问题讨论】：

你想做什么？似乎有更好的方法。正常使用按钮有什么问题？我不明白你想在这里完成什么。你想把你的标签放在中心吗？
w3schools.com/tags/tag_button.asp
@Thomas Wright css 类有单独的图像来为按钮提供圆角。我们还不想为此使用 CSS 属性。
这不是一个坏问题，您所做的实际上已被广泛使用（<button> 恕我直言的好处之一），但它只是没有验证。我会说如果它有效，请离开它
代替divs，使用spans和display:inline-block的css，这样就可以调整它们的大小。

标签： html w3c-validation

【解决方案1】：

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

您可以通过简单地将图像放入按钮中来实现 W3C 有效按钮。

Fiddle

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

image sprites 也是一件很棒的事情。

.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 /> 标记保持在同一行，否则它将图像视为它们之间有空格。

【讨论】：

这显然是我的一个相当老的问题，我很想批准一个答案，但是......我们使用 3 张图片的原因是因为按钮需要能够具有可变宽度。使用单个图像加上拉伸会给它带来奇怪的角落。虽然我认为如果您仅在

【解决方案2】：

如果您想使用自定义按钮，则必须将按钮标记替换为 div 或输入。在这种情况下，看起来 div 是您想要的。您只需添加任何必要的事件处理程序（用于您的提交）。

This 可能有助于澄清一些事情。

【讨论】：

就像我上面评论的那样，我们希望在还不支持border-radius 的浏览器中使用圆角按钮，例如 IE8。 3 个 div 都有自己的图像。
输入元素不允许圆角，对于没有javascript的用户，div不能作为按钮。
@TFennis 您在问题中声明您使用的是 Javascript。那么为什么不能在这里使用呢？

【解决方案3】：

根据HTML standard 和<button> 可能只包含Phrasing content。 div 元素不是短语内容的有效元素。

【讨论】：

【解决方案4】：

如果您使用的是表单，则可以将按钮更改为可点击的 div。例如：

<div role="button" onclick="$(this).closest('form').submit()">
    <!-- your child content here -->
</div>

或者，如果您知道表单名称或 ID，您可以将内联 javascript 更改为 document.getElementById("form-id").submit()

【讨论】：