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

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

根据HTML 标准， a<button>只能包含短语内容。元素div不是短语内容的有效元素。

Answer 2

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

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