ブラウザーでの境界線のレンダリング方法

ブラウザでの border 属性のレンダリング方法については、QQ グループで長い間議論されており、私はこれに対処するために常に border:0 none; を使用してきました。もちろん、そうする理由もあります。この理由については、以下の分析で説明します。境界線のプロパティを分析する前に、次の点を説明する必要があります。

1. Xiaozhi、私は分析の専門家ではありません。FF ブラウザと IE ブラウザでブラウザのレンダリング結果を表示するために、Firebug と IE 開発者の 2 つのツールを使用しているだけです。
2. FF ブラウザと IE ブラウザのレンダリング結果のみを調べているため、すべてのブラウザが同じようにレンダリングされることを意味するわけではありません。

境界線のスタイルをよりよく比較するために、ここでは「button」要素を選択しますが、使用されるタグは input タグ要素と button タグ要素です。ところで、言及する必要があるのは、これら 2 つのラベル要素がさまざまなブラウザーで共通しているのは、両方ともシステム コントロール要素であるということです。境界線のスタイルとボタンの背景はシステム テーマと絶対的な関係があります。

同じ XHTML 構造コードを使用して、FF ブラウザと IE ブラウザをそれぞれ比較します。

デモアニメーション1デモアニメーション2

現在のシステム テーマのデフォルト スタイルの影響により、IE ブラウザではボタンと入力という 2 つのタグ要素の解析に若干の違いがあることがわかりましたが、現在のシステム テーマで表示されるページに関する限り、パフォーマンスの効果はほぼ同じです。この点に興味のある学生は、自分で実験してみてください。 CSS スタイル定義がない場合の上記の列の属性の結果では、次のような結果が得られます。

*FF ブラウザ: input タグと button タグの境界線のスタイルは border-width:3px; border-color:#E5E5E5; です。
* IE ブラウザ: 入力ラベルの境界線スタイルは border-width:2px; border-style:outset; ボタン ラベルの境界線スタイルは border-width:2px;

このデータを使用して、border 属性のスタイルを定義したときに結果がどのようになるかを見てみましょう。