0

サイトを立ち上げてブラウザのテスト段階に入り、Firefoxで開いたところ、完全に壊れていました。1、2週間前に見たところ、問題はなかったので、ブラウザの非互換性の問題の山全体ではなく、多くのエラーを引き起こす単一の原因であると感じました。

とにかく少しデバッグした後、このルール（以下）の後のすべての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でBug810651として報告しました：セレクターに「]」がないため、スタイルシートの残りの部分が無視されます。

W3C CSS Validatorを使用してCSSをチェックすると、この場合のレポートはあまり説明的ではなく、単に「解析エラー」ですが、少なくともCSSコードにエラーがあることがわかります。さらに、よく見ると、次のように報告されていることがわかります。

1 input [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 に答える