我的公司正在构建一个网站,我们遇到了一些 JavaScript 库无法替换某些内容的问题。我们决定将 HTML 放入 W3C 验证器,它告诉我们拥有<div>标签内的<button> tag.
<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 都有自己的精灵,使其显示为圆形并允许不同的宽度。其他资源指出,按钮元素是为希望按钮包含图像等子元素的用户创建的,但 div 由于某种原因似乎无效。
box-radius
为什么按钮元素中不允许使用 div?
这个问题想要的解决方案是什么?
Edit2:
为什么不使用输入法呢?因为输入无法具有所需的布局
为什么不使用div?因为没有 JavaScript 的用户将无法提交表单。
好吧,我发表了评论,但没有爱。
只需将图像放入按钮内即可实现 W3C 有效按钮。
当然,您必须创建图像并向其中添加文本。但由于您已经为角创建了图像,因此应该不会太难。
Also 图像精灵 http://www.w3schools.com/css/css_image_sprites.asp是一件伟大的事情。
.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 />标签位于同一行,或者将图像视为图像之间有空格。
<img />