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的圆角按钮。我们在button元素中制作了3个div，每个div都有自己的精灵，使其看起来呈圆形，并允许不同的宽度。其他资源声明按钮元素是为希望按钮包含子元素（如图像）的用户创建的，但div由于某种原因似乎无效。

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

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

EDIT2：

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

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

Answer 1

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

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

Answer 2

我发表评论但没有爱。

只需将图像放在按钮内即可实现W3C有效按钮。

Fiddle

当然，您必须创建图像并将文本添加到图像中。但是，既然你已经为角落创造了不应该太难的图像。

image sprites也很棒。

＆＃13;

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

＆＃13;

<button class="test">
  <img src="http://alistapart.com/d/cssdropshadows/img/shadowAlpha.png" />
</button>

＆＃13;

如果你想在这里坚持使用3张图片，那就是更新版本。

＆＃13;

button {
  margin: 0;
  padding: 0;
  border: none;
}

＆＃13;

<button>
  <img src="http://placehold.it/50x50" /><img src="http://placehold.it/50x50" /><img src="http://placehold.it/50x50" />
</button>

＆＃13;

此外，如果没有其他CSS，您似乎需要将所有<img />标记保留在同一行，或者将图像视为在它们之间有空格。

Answer 3

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

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

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

Answer 4

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

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

4 个答案:

Fiddle