てんぽ: メモ:Netscape7.1, IE6 clearできないバグ

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

メモ:Netscape7.1, IE6 clearできないバグ

2006年07月22日(土)

ネガティブマージンを使ったCSSで三段組の場合、Netscape7.1でclearが正しく機能しない。 親要素のマージン幅によってはclearが効かないに似た症状。

これは三段組に限らず、大きな負の左右マージンとフロートをつかった段組法の場合に発症するらしい。 段組レイアウトでネガティブマージンとフロートを使うのは、 「サイドバー固定幅かつメインカラム可変幅で2段(3段)ぶち抜きフッター付きレイアウト」を実現するため(ADP: デザインテンプレート1110とネガティブマージン参照)ですが、 ここでmargin-left(right): -100%などとやってしまうとフッターのclearが効かなくなる(Netscape7.1とIE6で確認。Firefox1.5とOpera8.54は大丈夫)。

たとえば2段組レイアウトを次のようにしている場合。

<div id="main">
<p>可変幅</p>
</div>

<div id="sub">
<p>固定幅</p>
</div>

<div id="footer">
<p>ここでclear</p>
</div>
#main {
 width:100%;
 float:right;
 margin-left:-100%;
}

#sub {
 width:200px;
 float:left;
}

#main p {
 margin-left:220px;
}

#footer {
 clear:both;
}

(ちなみに2段組ならmargin-left: -100%ではなく、margin-left: -200pxで充分。)

多分、margin-left:-100%;により#mainの左マージン辺が右マージン辺と一致してしまうため、 左右マージン間の距離が0になっていることが原因だと思われる(margin-left: -99%なら正しくclearできる)。

したがって、#mainの左マージンを-100%から-99%に変更し、#subのほうに-1%の左マージンを与えればよい。

別の対処法としては#mainにpadding-right(left): 1pxを指定する。これはNetscape7.1とIE6(標準モード)に有効。 また、IE6(標準/互換モード)はこれらブロックの親要素(たとえばbody)に#mainのフロートと同じ側のpaddingを指定することで回避できる(この場合ならpadding-right: 1px)。

#102
カテゴリ:HTML・CSS
タグ[ CSS バグ IE ]

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/102-a4779b15

<<FC2ブログ共有テンプレート作者に10の質問の回答 | :first-letter擬似要素とかCSS Tipsとか>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。