0

我即将启动一个站点并进入浏览器测试阶段，然后在 Firefox 中打开它，它完全被破坏了。我在一两个星期前看过它，它很好，所以我觉得这是一个导致很多错误的单一事物，而不是一大堆浏览器不兼容问题。

无论如何，经过一些调试后，我发现这条规则（如下）之后的所有 CSS 根本没有加载。我看不出这条规则有什么问题。我还确定这不是规则的内容（-webkit-appearance: none），而是 input[type=""] 选择器。

/* Remove rounded corners in mobile webkit browsers */
input[type="text",
input[type="submit"],
input[type="button"],
input[type="tel"],
input[type="email"],
input[type="search"],
select,
textarea {
    -webkit-appearance: none;
}

有谁知道为什么这会导致 Firefox 问题？

现在我只是把它作为最后一条规则，这很好，因为这条规则不是针对 Firefox 的。但我真的很好奇它为什么会发生..？

4

2 回答 2

1

您在第一行有一个未闭合的括号：input[type="text",应该阅读input[type="text"],.

Firefox 通常会在遇到语法错误时停止解析 CSS 文件，这就是为什么不应用文件中的其余规则的原因。

于 2012-11-11T02:57:19.217 回答
-1

是的，这是一个 Firefox 错误，在错误处理中。我现在在 Bugzilla 中将其报告为错误 810651：选择器中缺少“]”会导致样式表的其余部分被忽略。

如果您使用W3C CSS Validator检查您的 CSS ，它的报告在这种情况下不是很具有描述性，只是“解析错误”，但至少您会看到您的 CSS 代码中有错误。此外，您仔细观察，您会看到它报告：

1 输入[type="submit"], input[type="button"], input[type="tel"], input[type="email"], input[type="search"], select, textarea 解析错误 [文字]

这里的 CSS 代码是指 Firefox 试图解析的内容，所以我们需要查看它之前的代码，因为这会影响解析模式。前一部分是input[type="text",，因此 Firefox 显然正在处理所有其余部分，就好像它在以“[”开头的属性选择器部分中一样。这样的错误处理是不正确的，因为根据错误处理规则，浏览器应该只跳过其余的语句。

当然，绕过这个错误的方法是修复你的 CSS 语法错误。

于 2012-11-11T07:13:18.437 回答