ネガティブマージンでハミ出した要素がIE6で切れたら。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

とりあえず

position:relative;

を一緒に指定してみるのが良いみたい。

IE6での表示
真ん中が見切れている状態で、一番下がposition:relative;を追加して問題を回避した表示。
IE6の表示、ネガティブマージンを指定した要素が見切れてる。

しかし2010年の今になって初めて出会うなんてなぁ。

ちなみにIE6以外だと同じソースでこんな感じ。

IE8での表示、ネガティブマージンの部分も見切れてない

なんで今までこの現象が起きなかったんだろう?と首をかしげつつ
再現出来る最小限のソースを作ろうと問題部分を抜粋していじるけどなかなか再現させられない。。。
結局、ネガティブマージンがある要素とその親要素両方にwidthを指定したらハミ出した部分が消えた。
最小限のソースにしなくちゃと思う気持ちがもつ脆弱性をついた攻撃!!

[html classname=”html-sh”]
<!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>

[/html]

試してる間にposition:relative;使っても見切れるのを回避できないネガティブマージンにも出会ったけど、そうなったらおとなしく親要素のpaddingやmarginでレイアウトした方がいいと思った。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメント

コメントを残す


You can add images to your comment by clicking here.