4

FF と IE で完全に動作する Web サイトを作成しましたが、Webkit ベースのブラウザー、つまり Chrome にバグがあります。

<a>問題は、 「アニメーション化された」ナビゲーション バー (:hover を使用) 内で要素が正しく描画されないことです。

Chrome でページの読み込みが完了すると、次のようになります

しかし、それはこのように見えるはずです。

しかし面白いことに、Chrome の [開発者ツール] ウィンドウで、任意要素の属性を微調整 (たとえば、チェックを外してチェック) すると、ブラウザが正しいスタイルに更新されます。ページをズームインおよびズームアウトしても修正されます。

私が見つけた唯一の同様の質問は、これでした。問題に解決策を適用しようとしましたが、うまくいきませんでした。ページの読み込み時に (上記の質問のように) 動的にスタイルを変更するために JavaScript を使用していないことに注意することが重要です。標準の HTML と CSS のみです。

これは webkit/chrome の再描画バグだと思います。これを修正する方法はありますか?

4

1 に答える 1

1

技術的なバグかどうかはわかりませんが、奇妙な動作であることは間違いありません。このセクションを変更することで回避できます。

#header_lower  ul li a{
box-sizing: border-box;
-ms-box-sizing: border-box; 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

...border-box の代わりに content-box を使用します。レイアウトがこれらの要素の周りの太い境界線に大きく依存しており、それを補うことができない場合を除き、それが良い方法かもしれません。

于 2012-12-20T13:50:00.407 に答える