個別記事

前後の記事

ボックスモデルハック

この記事が属するカテゴリー
CSS

今更ですが、ボックスモデルハックって何？って言うCSS初心者の方へ。（偉そうですが、僕も全然です；）
voice-familyハックを利用したBox Model HackをCSS Dencitieにて翻訳されていますので、ご覧になってみてはいかがでしょうか。基本的なハックですが、IE5.5などをキャッチアップできるので、使えれば重宝すると思います。ここでは、簡単に説明してみます。

例えば、ここに以下の様なブロックがあるとします。

div {
     width: 500px;
     padding: 10px;
     border: 5px;
}

OperaやIE6・NN6以上などのモダンブラウザであれば、ちゃんと500pxの幅で表示されるはずなのですが、CSS1を間違った解釈で表示するブラウザ（IE5.x）の場合、width500pxからpaddingとborderを引いた470pxと表示してしまいます。（500px-20px-10px=470px）

そこで、間違った解釈をするブラウザでも、500pxの幅を表示させるには、以下を追加・修正します。

div {
     width: 530px;
     padding: 10px;
     border: 5px;
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 500px;
}

まず、IE5.x用にpaddingとborderを足した幅を設定します。その後に、音声読み上げ用のプロパティvoice-familyを使ったハックをおこないます。モダンブラウザであれば\の直後の文字はエスケープされてしまうので、voice-family: "}";と意味不明な解釈（本来はmale、female、childなど）をし、その次のvoice-family:inherit;（前の値を継承）という指示で上書き、その後500pxと指定するのです。しかし、IE5.xは\でのエスケープが行われず、voice-family: "\"}の括弧で閉じて終了してしまいます。IE5.xではそれ以降が読み込まれず、IE5.xでは530px、モダンブラウザでは500pxで表示され、結果同じ幅になるという仕組みです。

2004-10-21T15:13:29+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/33

"ボックスモデルハック"へのトラックバックはまだありません。

コメント

"ボックスモデルハック"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)