html - 为什么这个 "width: auto"样式在两个浏览器中都作为内联样式工作，但仅在 IE 中移动到外部样式表时中断？

Question

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

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

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

IE Web 开发人员工具栏不会告诉我样式来自何处，因此很难诊断发生了什么。我最好的猜测是在 IE 中还有其他优先事项，但我不知道它可能是什么。

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

Answer 1

您是否绝对确定您的规则没有冲突或顺序错误(并且优先级相同)从而相互抵消？

除了 John Sheehan 的建议之外，您还可以尝试的一件事是将 ID 应用于输入元素，然后在您的样式表中制定一个规则，通过 ID 选择器将 width:auto 添加到该元素。

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

编辑:考虑到您的更新，导致您悲伤的规则正在按预期运行(就特异性而言)。如果你想专门处理你的元素，你仍然可以编写一个具有更强特异性的规则，如下所示:

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

但是，如果您发现自己像这样编写 CSS，那么您很可能做错了什么，并且可能需要重新考虑如何构建 CSS 规则。