IE のバグと言えば、悪名高い例は「ボックス モデル」の誤った解釈です。Quirks モードの IE5.x および IE6/7 では、ボーダーとパディングの両方が幅に含まれます。これにより、フロントエンド エンジニアの作業に多くの手間がかかります。サイズを定義する必要があるすべてのボックスについて、「ボックス モデルのバグ」を引き起こしていないかどうかを考慮する必要があります。
同時に、別のブラウザーのグループが標準に準拠しているため、限られたスペースに表示されるボックスを正確に定義する場合、境界線とパディングを除いたボックスに残されるスペースはごくわずかであることも計算する必要があります。 、幅は何で書かれていますか？
この状況は、「content-box」と「border-box」という 2 つの値を持つ box-sizing と呼ばれるこのプロパティのおかげで、CSS3 時代には改善されました。
box-sizing: content-box; を定義する場合、ブラウザによるボックス モデルの解釈は、以前に認識されていた W3C 標準に従います。
box-sizing: border-box; が定義されている場合、ブラウザーのボックス モデルの解釈は IE6 と同じです。
この属性が「遅い」と言われるのはなぜですか? IE のボックス モデルの解釈は W3C 仕様に準拠していませんが、利点もあります。ボーダーとパディングの値をどのように変更しても、ボックスの合計サイズは変更されません。ページ全体のレイアウトを崩さないようにします。 Firefox などの最新のブラウザでは、パディングの値を変更したい場合は、ボックスの幅を再計算する必要があります。 IE6 が廃止された今、この CSS プロパティは少し遅れています。
この新しいプロパティを試すには、Firefox の場合は -moz-box-sizing を使用し、Safari/WebKit の場合は -webkit-box-sizing を使用し、Opera の場合は box-sizing のみを使用してください。