とりあえず
position:relative;を一緒に指定してみるのが良いみたい。
IE6での表示
真ん中が見切れている状態で、一番下がposition:relative;を追加して問題を回避した表示。
しかし2010年の今になって初めて出会うなんてなぁ。
ちなみにIE6以外だと同じソースでこんな感じ。
なんで今までこの現象が起きなかったんだろう？と首をかしげつつ
再現出来る最小限のソースを作ろうと問題部分を抜粋していじるけどなかなか再現させられない。。。
結局、ネガティブマージンがある要素とその親要素両方にwidthを指定したらハミ出した部分が消えた。
最小限のソースにしなくちゃと思う気持ちがもつ脆弱性をついた攻撃！！
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乱雑モックアップ｜ネガティブマージンを指定した要素がIE6消えたら一緒にposition:relativeを指定してみようテスト。</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
/* レイアウト */
*{
padding:0;
margin:0;
}
#contents {
padding:30px;
margin:30px;
width:480px;
background:#d7d7d7;
}
.topics {
width:480px;
background:#f3f3f3;
}
dl {
padding-bottom:1em;
}
dt {
width:460px;
background:#09C;
color:#fff;
padding:5px 10px;
}
dd {
margin-top:5px;
}
ul {
padding-left:1.5em;
}
li {
list-style:disc;
}
/* 問題のネガティブマージン */
.negative_margin dt {
margin-left:-15px;
}
/* 回避策らしいrelative */
.fix dt {
position:relative;
}
</style>
</head>
<body>
<div id="contents">
<div class="topics">
<dl>
<dt>お知らせですよー / ネガティブマージンなし</dt>
<dd>
<ul>
<li>2010年 - お知らせはありませんよー</li>
<li>2009年 - お知らせはありませんよー</li>
<li>2008年 - お知らせはありませんよー</li>
</ul>
</dd>
</dl>
<dl class="negative_margin">
<dt>お知らせですよー / ネガティブマージンあり</dt>
<dd>
<ul>
<li>2010年 - お知らせはありませんよー</li>
<li>2009年 - お知らせはありませんよー</li>
<li>2008年 - お知らせはありませんよー</li>
</ul>
</dd>
</dl>
<dl class="negative_margin fix">
<dt>お知らせですよー / ネガティブマージン position:relative;あり</dt>
<dd>
<ul>
<li>2010年 - お知らせはありませんよー</li>
<li>2009年 - お知らせはありませんよー</li>
<li>2008年 - お知らせはありませんよー</li>
</ul>
</dd>
</dl>
</div>
<!-- / #contents -->
</div>
</body>
</html>
試してる間にposition:relative;使っても見切れるのを回避できないネガティブマージンにも出会ったけど、そうなったらおとなしく親要素のpaddingやmarginでレイアウトした方がいいと思った。
関連記事かもしれん:
乱雑モックアップのフィード
[...] そもそもなんでposition:relative;にしたんだろう？ 前々回のネガティブマージンでハミ出した要素がIE6で切れたら。で使ってみたのが頭の隅にあったからかな？ とりあえずこれから離れて [...]
ピンバック by ある要素内にpaddingが付いてる子要素があったりなかったりする場合に余計なclassを付けないでpaddingを揃える | 乱雑モックアップ — 2010年9月15日 @ 11:24