ズーム時に Chrome の境界線が消えるトラブルシューティング

このフォーラム スレッドで提起された懸念には、ユーザーがズームインしたり、外。この問題はすべてのユーザーに蔓延しているわけではありませんが、特定のフォーム (http://jsfiddle.net/TKb6M/91/ で入手可能) に影響します。

たとえば、90% にズームすると、元のフォームが表示されます。境界線が消え、入力フィールドが視覚的に装飾のない状態になります。ユーザーはまた、水平方向のスペースを効率的に割り当てることを目的とした別のスレッドの推奨事項に基づいて タグを含めることについても言及しています。

これが CSS の問題なのか、それとも Chrome の特定の動作の問題なのかという疑問が生じます。さらに、ユーザーは、この望ましくない影響を防ぐための解決策を探しています。

提案された解決策

元の投稿者はこの懸念に対処しているかもしれませんが、賢明なユーザーは簡単な解決策を見つけました。解決。 CSS コードを変更することで、この問題を解決できます。

オリジナル CSS

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

変更された CSS

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

この変更により、明示的な「1px」値が相対単位である「thin」に効果的に置き換えられます。その結果、ズーム レベルに関係なく、境界線は一貫した外観を維持します。

この解決策は、Google 製品フォーラムのスレッドから引用されました: https://productforums.google.com/forum/#!topic/chrome/ r1neUxqo5Gc.

この簡単な変更を実装すると、Chrome で境界線が消える問題が軽減され、ズーム中の視覚的に一貫したユーザー エクスペリエンスが確保されます。