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

Question

我有一个默认为“宽度：100％”的INPUT元素。这导致它将其下的其他元素向下推到下一行。为了临时解决这个问题，我在这个元素上添加了一个内联样式属性，如下所示：

​​

其中工作得很好。现在，我要回过头来清理临时修复，并将所有样式从样式属性移到外部样式表中。当我将这个特殊的“width：auto”风格移动到样式表中时，它在Firefox中看起来仍然很好，但是在IE中忽略它，并且默认再次显示“width：100％”，这会再次触发它旁边的元素。

IE网页开发工具栏不会告诉我样式来自哪里，因此很难诊断正在发生的事情。我最好的猜测是在IE中还有其他优先级，但我不知道它会是什么。我发誓我试图右键单击IE开发人员栏中，但我想不是 - 当我在IE浏览器的“宽度：100％”上做“跟踪样式”时，我得到一个弹出窗口，上面写着“1”。没有匹配“，但是在Firefox中，它显示100％从上面的元素上的选择器流出，就像”#outer foo bar INPUT“一样，它覆盖了这个INPUT。我错误地认为直接在INPUT元素上的“#id”比“#id foo bar INPUT”具有更高的特异性，但我猜浏览器对此不同意。无论哪种方式，这都得到了我的问题的根源，所以感谢评论。我希望有一种方式，以促进一个答案评论...

Answer 1

你绝对确保你的规则是不冲突或以错误的顺序（以及相同的优先级），因此相互抵消？

一两件事你可以尝试，除了约翰·希恩的建议是一个ID应用到输入元素，然后在您的样式表中的规则，增加了宽度：汽车通过ID选择该元素。

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

编辑：考虑到你的更新，这是造成你的悲伤的规则工作，因为它应该（只要特异性而言）。如果你想解决您的元素具体情况，你仍然可以写与更强特异性的规则，像这样的东西：

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

如果你发现自己写这样的CSS，虽然，赔率是你做错了什么并可能想重新考虑如何构建CSS规则。