ulの画像をcssのfloatで横並び、IEでの印刷が変（ソース記述のため長文です）

締切済

質問者：uuu77uuu
質問日時：2007/11/26 22:28
回答数：2件

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">

</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件)

最新から表示
回答順に表示

No.2

回答者： CHI-512
回答日時：2007/11/29 11:57

こんにちは。

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>

参考になれば幸いです。

- 0
- 件

通報する

この回答へのお礼

やはり、バグなのですか。。
色々な方法を詳しく書いていただいて、どうもありがとうございます！
今後の参考にさせていただきます！

通報する

お礼日時：2007/12/05 13:45

No.1

回答者： nyaranyu
回答日時：2007/11/27 04:37

IE6の仕様と言ってしまえばそこまでですが…

私の場合は指摘されて、どうしてもと言われれば下記のような記述にして逃げています。

ul.pageLink{
margin: 0 -1px 0 0;
padding: 0px;
list-style: none;
width: 766px;
}

・ulのwidthを全体の幅（この場合は765px）+1pxにする。
・右のマージンを-1pxにする。

media="all"に書くこともありますし、media="print"を用意してそこに書くこともありますが、たいていこれで誤魔化しています。

ベストな方法とも思わないので、参照程度にどうぞ…