ホームページ作成素材 Cool Liberty > WEBデザインチュートリアル > Internet Explorer4~5.5のボックス関連バグへの対処方法

Internet Explorer4~5.5のボックス関連バグへの対処方法

このWEBデザインチュートリアルでは、CSS2の仕様と、Internet Explorer4~5.5のボックスの幅と高さの解釈の違いへの対処法をレクチャーしていきます。

Internet Explorer4~5.5では、ボックスの幅や高さを指定した場合に適用される部分がCSS2の仕様とは異なっているため、パディングやボーダーが指定されているボックスは、他のWEBブラウザとは異なる大きさで(小さく)表示されてしまいます。

CSS2の仕様と、Internet Explorer4~5.5のボックスの幅と高さの解釈の違い

下のソースで示すように、voice-familyプロパティによる裏技的手法を使って、Internet Explorer4~5.5にだけ別の値を指定することができます。

Internet Explorer4~5.5は「¥」を使ったエスケープ処理に対応していないため、voice-familyプロパティの値として「"¥"}¥""」のように指定すると、「"¥"}」の部分でカッコを閉じたと判断し、その後の指定を読み込まなくなるのです。したがって、「¥」のエスケープに対応したWEBブラウザ向けには、その後で正しい幅や高さの値を上書き指定すればよいのです。voice-familyは音声で読み上げる際の声の種類を設定するプロパティですが、2つ目の指定で値を「継承値(inherit)」に戻しています。

■CSSソース

セレクタ {
・・・
・・・
width: 160px;
height: 210px;
voice-family: "¥"}¥"";
voice-family: inherit;
width: 140px;
height: 190px;
}

IE4~5.5は、CSSソースの6行目までしか読み込まないため、幅160ピクセル高さ210ピクセルに設定されます。他のWEBブラウザは、最後まで読み込むため、幅140ピクセル高さ190ピクセルに上書きされます。

Internet Explorer4~5.5のボックス関連バグへの対処方法の評価を是非お願いします!
(星の上へマウスを乗せてクリックするだけでOKです)

  • Currently 0.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

評価: 0.0/5 ( 投票 )

Internet Explorer4~5.5のボックス関連バグへの対処方法に関連する素材 & コンテンツ

目的に合ったコンテンツが見つからなかったあなたへ

このサイトでなら役に立つコンテンツが見つかるかも

0574 W.S.R