为什么不能<按钮>元素包含< div&gt ;? [英] Why can't a <button> element contain a <div>?

问题描述

我的公司正在建立一个网站，我们在JavaScript库中没有取代某些东西时遇到了一些问题。我们决定把我们的HTML放入W3C验证器，它告诉我们在<按钮>中有一个< div> 标签是非法的。 tag。

 < button class =buttontype =submit> 
< div class =buttonNormalLargeLeft><！ - ＃ - >< / div> 
< div class =buttonNormalLargeCenter>搜寻航班< / div> 
< div class =buttonNormalLargeRight><！ - ＃ - >< / div> 
< / button> 
  

结果：



 第287行，第46列：在此上下文中元素div不允许作为元素按钮的子元素。 （从这个子树抑制进一步的错误。）
  

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

为什么div不允许里面的按钮元素？

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

Edit2：

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

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

解决方案

我发表了一条评论，但没有爱。 p>

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

小提琴

授予您必须创建图像并添加文字给他们。但是，既然你已经创建了角落的图像，不应该太难。

另外 image sprites 是一件好事。

jsdata-hide =falsedata-console =falsedata-babel =false>

  .test {width：258px;身高：48px;背景：无; border：1px solid transparent;}。test：active {outline：0;}。test> img {width：258px;身高：45px;不透明度：1;背景：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;填充：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 /> 标签保留在同一行上，或者它将图像视为在它们之间有空格。 / p>

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.

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

Why are divs not allowed inside button elements?

What is the desired solution to this issue?

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.

解决方案

Well I posted a comment but no love.

You can achieve a W3C valid button by simply putting an image inside the button.

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.

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.

这篇关于为什么不能<按钮>元素包含< div&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！