CSS のサイズと幅と高さのブラウザ解釈の違いに対する解決策

まずは例を見てみましょう

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv=”コンテンツタイプ” content=”text/html; charset=gb2312″ />
<title>無題のドキュメント</title>
<スタイル>
#m{高さ:300px;幅:300px;背景:#ccc}
#a{float:left;height:100px;width:100px;background:#f00;}
#b{float:left;height:100px;*height:110px;_height:120px;width:100px;background:#0f0;}
#c{クリア:両方;高さ:100px;幅:100px;*幅:100px;_幅:120px;背景:#00f;}
</スタイル>
</head>
<本文>
<div id=”m”>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</本文>
</html>

ここでは、それぞれ 3 つの高さを定義します。
最初の通常の定義はすべてのブラウザで有効になります。
2 番目の定義では先頭にアスタリスクが追加されており、IE6 および IE7 では height 属性として認識されますが、Firefox および IE8 では構文エラーとみなされ無視されます。実行順序によると、アスタリスク付きの高さは IE6 および IE7 で実行され、最初の通常の高さは無効 (または上書き) になります。
3 番目の高さの前にはアンダースコアがあります。アンダースコアを有効な高さ属性と見なすのは IE6 のみですが、IE7、IE8、Firefox は "_height" 属性を存在しない属性と見なして実行しませんが、IE6 は実行します。このように、最初の 2 つの高さは IE6 の下線付きの高さでカバーされます。

さて、この例から、異なるブラウザで要素の高さを異なるように設定する場合には、定義を支援するために * と _ の記号を使用できることがわかります。同時に、マイクロソフトはミスに対して寛容な会社だということもわかりました！笑。

ただし、この例の最初の 2 行のドキュメントタイプと名前空間の宣言を削除すると、下線の高さも正常に表示されます。

幅の設定は同じです。

実際の作業では、マージン属性の解釈がブラウザによって異なることがよくありますが、その場合、アスタリスクとアンダースコアが非常に役立ちます。

<<: Tomcatが親の委任メカニズムを破壊する方法についての簡単な説明

>>: CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法