メインコンテンツへ移動

Chrome におけるスタイル互換性の問題

無料2015-06-09#Solution#浏览器默认样式#Chrome样式兼容

最近、たまにホームページのサインインカレンダーが非常に醜くなることに気づきました。Chrome28 と Chrome43 の両方で発生しましたが、Firefox や IE6-8 ではすべて正常でした。詳しく調べたところ、ブラウザのデフォルトスタイルが原因であることがわかりました。

一、問題

たまたまサインインカレンダーがこうなっていることに気づきました:

ugly

以前はこのスタイルは出現しませんでした(元々は整然と並んだカレンダーのマス目だったはずです)。最近のアップデート確認と関係があるかもしれません。Chrome28 でアップデートを確認し、更新に失敗した後、この問題が発生したようです。

Chrome43 は最初からこの問題があったようです。当時、Chrome の新版本が旧バージョンと互換性がないのはなぜかと不思議に思いました。これは Google のスタイルではありません。

二、原因

スタイルに問題はないと思っていました。リリース時は IE6+、Chrome28、FF に対応していました。この問題が発生したのは、スタイルの書き間違いではないはずです。

画像から、丸をつけたマスのスタイルがすべて間違っており、丸をつけていないマスのスタイルは正しいことがわかります。詳しく比較すると、両者の違いは丸をつけたマスに check クラスが 1 つ多いだけでした。奇妙なことに、要素を確認し、check スタイルを無効にしても効果はありませんでした(check スタイルは背景画像を��定しているだけなのに)。全く理解できませんでした。。

スタイルリストを下にスクロールすると、もう一つの check が見えました:

check

そうです、これが犯人です。醜いカレンダーはこれが原因でした。ブラウザのデフォルトスタイルに check という名前があるなんて、せめてプレフィックスをつけてほしいものです。。

三、解決策

ネットユーザーが提供した比較的科学的な解決策は以下の通りです:

-webkit-appearance:none; /* 去除默认样式 */

しかし、これは効果がないようです

まあ、最も直接的な方法を使えます:クラス名を変更するのです。check はあなたにあげます、私は要りません

あとがき

Chrome はなぜこんなに変なデフォルトスタイルを自带しているのでしょうか?全く理解できません

コメント

コメントはまだありません

コメントを書く