横並びリスト ブラウザ縮小 カラム落ち

質問

よろしくお願いします。

ulとliで横並びの商品リストの様なものを作成していて、
ようやく完成したと思っていたのですが、
ブラウザの拡大/縮小機能を使って、
少しでも縮小するとカラム落ちが発生してしまいます・・・。

完成したと思っていたので焦っております(汗)

簡単にソースを記載しますので、
原因と対策がわかりましたら、どうか回答宜しくお願いします。

ul{
width:720px;
list-style:none;
}

li{
width:142px;
border:1px solid #000;
float: left;
}

このような感じで、ulには別にクラスを指定して、clearfixも指定しています。
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

ulの全体720pxを5個のliで割って、144pxとなり、
そこからborder両サイド1pxづつを引いて142pxをliに指定しているのですが、
間違っているのでしょうか？

liの幅を144pxにしてborderを指定しない場合は、
縮小してもカラム落ちは起こりません。

初歩的なことかもしれませんが、
どうぞよろしくお願いします。

回答No.1

naokita · ベストアンサー

ブラウザの種類

DTD 過去/標準の変更

ul,li{padding:0; margin:0;}

clearfixを削除して検証（最少ソースで検証）

縮小したときの検証ツールでのレイアウト数値の調査

a要素の絡み

テキストや画像の関係

その他のCSSが干渉？

*:first-child+html li{ letter-spacing: 0;}
*:first-child+html li a{ letter-spacing: 0;}