この質問はインターネット上で多くの人から寄せられていると思いますが、最近再び議論されました。border :noneとborder:0の違いは次の 2 つの点に反映されています。 、理論上のパフォーマンス 2 番目の違いは、ブラウザの互換性の違いです。
パフォーマンスの違い:
[border:0;] 境界線に「0」に設定されたピクセルはページ上に表示されませんが、境界線のデフォルト値に従って、ブラウザーは引き続き border-width/border-color、つまりメモリ値が占有されています。
[border:none;] 境界線を「none」に設定します。これは、ブラウザーが「none」を解析するときに、レンダリング アクションを実行しません。つまり、メモリ値を消費しません。
互換性の違い:
互換性の違いは、ブラウザ IE6、IE7、およびラベル ボタンと入力にのみ適用されます。この状況は、Win、Win7、Vista の XP テーマで発生します。
[border:none;] border が「none」の場合、次のDemo1 の例に示すように、IE6/7 の無効な境界線がまだ存在しているように見えます。
[border:0;] border が「0」の場合、次のDemo2 の例に示すように、すべてのブラウザーで境界線が均一に非表示になります。
要約:
border:0;とborder:none;の違いは、display:none;とvisibility:hidden;の関係にあるように感じますが、レンダリングのパフォーマンスを比較するテストはありません。 border属性の違いにより、描画性能に差があると考えられますが、あくまで理論上のものと言えます。
border:none と完全に互換性を持たせるにはどうすればよいですか?次のDemo3の例に示すように、background 属性を同じセレクターに追加するだけです。
border:0; と border:none; については、結局のところ、border:none; はパフォーマンス消費の点で議論の余地がなく、互換性は背景属性で解決でき、障害にはならないため、個人的には border:none; を使用することを好みます。 。