- 締切済み
ulの画像をcssのfloatで横並び、IEでの印刷が変（ソース記述のため長文です）
ulを使い、スタイルで画像を横並びにしたのですが、個々の画像サイズで印刷が正しくされる場合とされない場合があります。 具体的ソースは下部に記述します。 印刷すると、最初のulの方は画像が１つ折り返されてしまいます。 FFやNNは大丈夫でしたが、IEだけが印刷プレビューの段階から折り返されました。 参考に、自分の環境も記載します。 なぜなのか気になっておりまして…。どこか書き方がおかしいのでしょうか？おわかりになりましたら、よろしくお願いします。 ※長文すみません。 ★システム XP professional Version 2002 service Pack 2 ブラウザ IE6.0.29 以下がソースです------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css" media="all"> <!-- ul.pageLink{ margin: 0; padding: 0px; list-style: none; } ul.pageLink li{ padding:0; margin: 0; float: left; } --> </style> </head> <body> <div style="width:765px"> ■折り返される <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="217" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="139" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="216" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> <br> ■折り返されない <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="207" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="159" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="206" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> </div> </body> </html>
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- CHI-512
- ベストアンサー率69% (63/91)
こんにちは。 No.1さんと同じくIE6のCSS解釈が誤っているのが原因です。 Floatするとなぜか右マージンが3px程発生してしまうバグがあったはず？ 恐らく、最後のメニュー画像に右マージンが発生しているために折り返されてしまうのでしょう。 <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> を <li class="menu-d"><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> にして、 スタイルシートで .menu-d { float: right; } にするか、 * html li.menu-d { /* IE6 Hack */ margin-right: -3px; /* 無理やりっぽいですね */ } で直ると思います。 他の対処法としては、 liをインライン属性にすればいいと思います。 ul.pageLink li { display: inline; } このとき、画像の右に半角スペースが生じてしまう場合は、リストのソースを以下のようにし、</li><li>間の改行を無くすと綺麗に並びます。 <ul class="pageLink"><li><a href="#a"><img src="img/a.gif" alt="" width="207" height="36" border="0"></a></li><li><a href="#b"><img src="img/b.gif" alt="" width="159" height="36" border="0"></a></li><li><a href="#c"><img src="img/c.gif" alt="" width="206" height="36" border="0"></a></li><li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li></ul> 参考になれば幸いです。
- nyaranyu
- ベストアンサー率100% (1/1)
IE6の仕様と言ってしまえばそこまでですが… 私の場合は指摘されて、どうしてもと言われれば下記のような記述にして逃げています。 ul.pageLink{ margin: 0 -1px 0 0; padding: 0px; list-style: none; width: 766px; } ・ulのwidthを全体の幅（この場合は765px）+1pxにする。 ・右のマージンを-1pxにする。 media="all"に書くこともありますし、media="print"を用意してそこに書くこともありますが、たいていこれで誤魔化しています。 ベストな方法とも思わないので、参照程度にどうぞ…
お礼
やはり、バグのようなものなのですね。。 今回は、画像サイズ自体を少し調整して対応しました。 また、このようなケースがあったら、参考にさせていただきます。 どうもありがとうございました！
お礼
やはり、バグなのですか。。 色々な方法を詳しく書いていただいて、どうもありがとうございます！ 今後の参考にさせていただきます！