为什么这个“width:auto”样式在两个浏览器中都作为内联样式工作,但只在IE中移动到外部样式表时才会中断?

时间:2008-12-10 05:15:48

标签: html css internet-explorer stylesheet

我有一个INPUT元素默认为“width:100%”。这会导致它将其旁边的其他元素向下推到下一行。为了暂时解决这个问题,我在元素上添加了一个内联样式属性,如下所示:

<input style="width: auto" ...>

哪个工作得很好。现在我要回去清理临时修复程序,并将样式属性中的所有样式移动到外部样式表中。当我将这个特定的“width:auto”样式移动到样式表中时,它在Firefox中看起来仍然很好,但是在IE中它忽略它并再次默认为“width:100%”,它再次吹掉它旁边的元素。

IE Web开发人员工具栏并没有告诉我样式的来源,因此很难诊断出正在发生的事情。我最好的猜测是IE中有一些优先权,但我不知道它可能是什么。

编辑:我发誓我尝试在IE开发人员栏中右键单击,但我猜不是 - 当我在IE中的“宽度:100%”上执行“跟踪样式”时,我得到一个弹出窗口,只是说“1.否匹配“,但在Firefox中,它表明100%正在从上面元素的选择器中流出,类似于”#outer foo bar INPUT“,它也涵盖了这个INPUT。我错误地认为直接在INPUT元素上的“#id”比“#id foo bar INPUT”具有更高的特异性,但我想浏览器不同意这一点。无论哪种方式,这都是我的问题的根源,所以感谢您的评论。我希望有一种方法可以对答案进行评论......

1 个答案:

答案 0 :(得分:2)

你绝对确定你的规则没有冲突或顺序错误(并且具有相同的优先顺序),从而相互抵消了吗?

除了John Sheehan的建议,你可以尝试的一件事是将一个ID应用于input元素,然后在样式表中创建一个规则,通过ID选择器将width:auto添加到该元素。

这样,规则将具有更高的优先级,并且更有可能被应用。这将使您更好地了解问题所在。

编辑:考虑到您的更新,导致您悲伤的规则正在按预期工作(就特异性而言)。如果你想特别解决你的元素,你仍然可以编写一个具有更强特异性的规则,如下所示:

#outer foo bar INPUT#id {
  width:auto;
}

如果您发现自己正在编写这样的CSS,那么您可能做错了什么并且可能想重新思考如何构建CSS规则。

寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1