为什么元素不能包含？[英]Why can't a element contain a ? 本文翻译自  TFennis  查看原文  2013-04-08  29199    html5/ html/

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验证器，它告诉我们在标签内有一个

标签是非法的。

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

编辑：澄清我们在这里要做的事情。我们想制作一个圆角的按钮，它不依赖于盒子半径。我们在button元素中制作了3个div，每个div都有自己的精灵，使它看起来呈圆形，并允许不同的宽度。其他资源声明按钮元素是为希望按钮包含子元素（如图像）的用户创建的，但div由于某种原因似乎无效。

Why are divs not allowed inside button elements?

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

What is the desired solution to this issue?

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

Edit2:

EDIT2：

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的用户将无法提交表单。

3 个解决方案

#1

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就是你想要的。您只需添加任何必要的事件处理程序（对于您的提交）。

This might help clarify things a bit.

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

#2

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 sprites are 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>

Edit

Since you made the request to go ahead and 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，您似乎需要将所有标记保留在同一行上，或者将图像视为在它们之间有空格。

#3

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（）