- ベストアンサー
IE6にてliタグに対してposition:absolute;を使ったときのバグについて
すみません、質問させて下さい。 下記のソースとスタイルシートでIE6の場合だけliが原因と思われる余白ができます。他のモダンブラウザ、IE7以降ではhrの部分を除いて問題ありませんでした。余白をなくす方法はないでしょうか。 ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link href="test.css" type="text/css" rel="stylesheet"> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>test</h1> </div> <div id="contents"> <div id="lefty"> <p>test test test （略）</p> </div> <div id="righty"> <p>test test test （略）</p> </div> </div> <hr> <div id="navi"> <ul> <li id="list01"><a href="#">赤</a></li> <li id="list02"><a href="#">青</a></li> </ul> </div> <div id="footer"> <address>copyright.</address> </div> </div> </body> </html> スタイルシート @charset "shift_JIS"; * { margin: 0; padding: 0; } body { text-align: center; } #wrapper { margin: 0 auto; width: 760px; position: relative; text-align: left; } #header { width: 760px; height: 100px; background-color: #CC9900; } #contents { width: 760px; } #lefty { width: 380px; float: left; background-color: #CCC; } #righty { width: 380px; float: right; color: #FFF; background: #000 } #list01 a { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav01.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 30px; right: 0; } #list02 a { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav02.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 60px; right: 0; } #list01 a:hover { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav01_on.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 30px; right: 0; } #list02 a:hover { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav02_on.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 60px; right: 0; } #footer { clear: both; padding-top: 30px; width: 760px; background-color: #990033; } li { list-style-type: none; } a { text-decoration: none; } hr { clear: both; width: 0; } どなたかご教授ください、よろしくお願いします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
> ANo.1お礼 すみません、list-style-positionありましたね。 > ANo.3 > #contents内のhrから#footerまでの隙間の事ですね。 ああ、なるほど、 <li>の左右に余白が出来るのではなく、 a{position:absolute;}で中身を飛ばしたにもかかわらず、<a>の分だけスペースが残っていると言うことですか。 古いブラウザには、floatの時でもheightを0にしないものがありますので、同様に<ul>や<li>にheightが残ってるかもしれませんし、 #nav ul, #nav li{height:0} /* または _height:0 */ を指定してみてはいかがでしょうか。 個人的には、aだけをレイヤーにするのではなく、<div id="#nav">ごとレイヤー化するほうが管理しやすいと思います。
その他の回答 (4)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
#navi ul { list-style-position: outside; } これでどうでしょうか。 #list01 a{position:absolute;}だから関係ない気もしますが、、、 > 下記のソースとスタイルシートでIE6の場合だけliが原因と思われる余白ができます。 list-style-positionはブラウザごとにデフォルト値が違いますので、 予期しない表示位置になることがあります。 テストケースも含めて未検証です。
お礼
ご回答ありがとうございます。
- salonpath
- ベストアンサー率48% (194/399)
あ、思いっきり勘違いしてました！ #contents内のhrから#footerまでの隙間の事ですね。 申し訳ないです、すみません。 こちらのietesterのIE6-8は、rodem2009さんの説明とは違ってすべて同様の隙間があいています。 Firefox3ではほぼ隙間はない状態でした。
お礼
ご回答ありがとうございます。ちなみにpaddingを除いた隙間は２行でした。
- salonpath
- ベストアンサー率48% (194/399)
ちなみにこれ提示してるソースあってますか？↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> だと後方互換モードになるからie6でもliの青と赤の文字分広がらないと思うのですが 逆にdoctypeをちゃんと書くと↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ie6でダメになりました（こちらの環境だと）。 paddingの代わりにline-height:なんてどうでしょうか ■css #navi a{ width: 180px; height: 30px; display: block; line-height:10em; overflow: hidden; } #list01 a { background: url(images/nav01.gif) no-repeat; position: absolute; top: 30px; right: 0; } #list02 a { background: url(images/nav02.gif) no-repeat; position: absolute; top: 60px; right: 0; } #list01 a:hover { background:url(images/nav01_on.gif) no-repeat; } #list02 a:hover { background:url(images/nav02_on.gif) no-repeat; } --- height: 0px !important; height/**/: 30px; この2行が、どんなハックなのか、わからないので削除しちゃいました。 この2行にはどうゆう意味があるのでしょうか？不勉強ですみません。
お礼
順序が逆になってすみません。ご回答ありがとうございます。 DOCTYPE宣言文は以前つくったものから、意識せずに、コピペしました。
補足
#navi a{ width: 180px; height: 30px; display: block; line-height:10em; overflow: hidden; height: 0px !important; height/**/: 30px; } で画像置換のひとつの方法ということなのでまだ自分も完全に把握できていません。/**/はコメントハックというそうです。 #1の補足に書いたように、ulごと絶対配置すれば、問題なく消えました。
- SAYKA
- ベストアンサー率34% (944/2776)
liそのもののpaddingとかが何も無い気がするんだけど気のせい？
お礼
ご回答ありがとうございます。全称セレクタでの指定で十分かと思い記述していませんでした。 li { margin: 0; padding: 0; list-style-type: none; list-style-position: inside; list-style-image: none; } と記述しても変化はありませんでした。
補足
liタグのマーカーボックスが怪しいと試行錯誤していたのですが、ulごと上にpositionを指定したら、hrの高さを残して余白は無くなりました。 しかし、上段のリンクが基点となって、このソースにはない、inputが上段の中央に配置されてしまっている状態です。
お礼
ご回答ありがとうございます。liタグのマーカーボックス？ごと（ulタグごと）、絶対指定することで自己解決しました。talooさんのおっしゃるように<div id="#nav">ごとにレイヤー化するのがよいと自分も思いました。 勉強中の身な上に、DIV厨という言葉に惑わされてしまい、まだケースによって、divを使うか、要素に直接idやクラスをつけるか迷ってしまい、極力divは減らしています。