在 IE 中提交按钮和显示块答案

【问题标题】：submit button and display block in IE在 IE 中提交按钮和显示块
【发布时间】：2011-04-19 11:00:41
【问题描述】：

为什么下面的代码在 FF 中将提交按钮放在了自己的一行，而在 IE 中却放在了同一行？

<style type="text/css">
#div1 form input.submit {display:block;}
</style>

<div id="div1">
<form>
hi
<input type="submit" class="submit" value="hello there">
</form>

</div>

【问题讨论】：

我刚刚在 IE8 中测试了这个，按钮在它自己的行上。你用的是什么版本的IE？

标签： html css internet-explorer block

【解决方案1】：

发生这种情况的原因是您缺少<body> 打开标记。当<body> 打开标记未在 HTML 中显式显示时，IE（至少 6 个）会错误呈现文档树，并且任何涉及 form 元素的选择器都无法正常工作。

Here，我添加了body标签，它可以工作了。

只需yesterday I documented pretty much the same bug。看来我必须更新描述，不仅要说明表单因缺少 body 标签而无法设置样式，而且如果它在选择器中，其他元素也无法设置样式。

正如doctororange 指出的那样，您也可以通过不在选择器中指定form 来解决此问题，但我建议您输入<body> 标记。

【讨论】：

【解决方案2】：

如果你在 ie6 上测试试试：

#div1 form .submit {display:block;}

【讨论】：

【解决方案3】：

因为 IE 不符合网络标准。

在我看来，form 选择器似乎挡住了路，至少使用三重嵌套选择器：

这行得通：

#div1 input.submit{
display:block;
}

这行得通：

form input.submit{
display:block;
}

这不是：

#div1 form input.submit{
display:block;
}

【讨论】：