0

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

<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”具有更高的特异性，但我猜浏览器不同意这一点。无论哪种方式，这都是我问题的根源，所以感谢您的评论。我希望有一种方法可以促进对答案的评论......

4

1 回答 1

2

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

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

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

编辑：考虑到您的更新，导致您悲伤的规则正在按预期工作（就特异性而言）。如果您想专门解决您的元素，您仍然可以编写具有更强特异性的规则，如下所示：

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

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

于 2008-12-10T07:36:18.487 回答