Home > 日記 > このサイトについて > スタイルシート > 2005年2月
2005年2月24日
配置のバグ対応用裏わざ
今まで画像だけを投稿すると投稿者(posted)の部分まで画像が重なってました。
それを回避するためにスタイルシートで回り込みを解除するためclear属性を使ってました。
でもそうすると画像は重ならないのですが、両脇の枠線が繋がらなかったのです。
それがやーっと解決できました。Internet Explorerのバグだったようです。
Internet Explorerの配置にかかわるバグは大体幅と高さを指定すれば解決するそうです。
また、1%などの高さを指定しても無いようにあわせて勝手にサイズを拡張してしまうというバグもあるらしいです。
そのため、高さを指定したくないという場合には1%の高さを指定しておけば、指定してない状態と同じように表示されます。
その指定が2行目。
ただしこのバグはWindows版だけなのでMacintosh版を除外するため上下の記述をしておかないと
Macintosh版では1%で表示されてしまいます。
/* Hides from IR5-mac \*/
*html div.EntryBody{height: 1%}
/* End hide from IE5-mac */
これをスタイルシートに追加しました。
私は各エントリー内容を<div>タグ(class="EntryBody")で囲っています。
その中に画像を納めたいのにはみ出していました。
そのためdiv.EntryBodyに対して高さの指定をしています。
「CSSの配置でうまくいかないことがあったらその部分やそれを囲うdiv要素に適用してみてください。」っと本に書いてありましたのでよくわからないながら試してみました。
参考にした本(この本のP.94に載ってました。)
XHTML+CSSで書くホームページ構造デザインガイド