Chrome でズームすると入力フィールドの境界線が消えるのはなぜですか?

Chrome のとらえどころのない境界線: 消える入力境界のトラブルシューティング

ユーザーが Chrome 経由で単純なフォームにアクセスすると、ズームすると入力要素の境界線が消える問題が発生する場合があります内でも外でも。この現象は、ズーム レベル 90% 付近で観察されます。この動作の原因については議論が巻き起こり、CSS の問題に起因するという人もいれば、Chrome のバグだと主張する人もいます。

問題の根本

根本原因この動作はブラウザのレンダリング エンジンにあるようです。 「thin」キーワードを使用して境界線の幅を指定すると、Chrome はそれを特定のピクセル値 (多くの場合 1px 程度) として解釈するため、ズーム操作中に丸め誤差が発生する可能性があります。これにより、境界線の太さがゼロになり、要素の境界が効果的に隠れる可能性があります。

簡単な解決策

この問題に対処するには、簡単な CSS 調整をお勧めします。 「細」を使用する代わりに、特定のピクセル値を使用して境界線の幅を指定します。たとえば、CSS コードを

INPUT, TEXTAREA {
  border-top: thin solid #aaa;
}

から

INPUT, TEXTAREA {
  border-top: 1px solid #aaa;
}

に変更すると、問題が解決するはずです。境界線の幅を明示的に定義することで、Chrome の丸め誤差を回避し、さまざまなズーム レベル間で一貫した境界線の表示を確保できます。

以上がChrome でズームすると入力フィールドの境界線が消えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。