IE 擬似クラス使用 printについて

質問

現在擬似クラスを使用してページを作成しています。
擬似クラスはselectivizr.jsを使用しています。
http://selectivizr.com/

ソースは下記になります。
#navi {
list-style:none;
width:150px;
margin:0;
padding:0 10px;
overflow:hidden;
/zoom:1;
}

#navi li {
float:left;
padding:0 10px;
border-left:1px solid #000;
white-space:nowrap;
}

#navi li:nth-child(3) {
clear:both;
border-left:none;
}

<ul id="navi">
<li>テスト1</li>
<li>テスト2</li>
<li>テスト3</li>
<li>テスト4</li>
</ul>

としていますが、ページの表示上では問題ないのですが、プリントプレビューを見るとききません。(IEのみ)
上記の擬似クラスを使用しても綺麗に印刷できる方法はないのでしょうか？

擬似クラスを使用しないとか、idやclassを使えば等のコメントではなく、できる限りの方法がしりたいです。
print.css使用は可能です。
宜しくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

スタイルシート一文字抜けてました。
ul#navi,ul#nav li{
list-style:none;/* IEバグ対策(displayを指定してもマーカーが残る */
display:block;margin:0;padding:0;
}
ul#navi{width:150px;}
ul#navi li { /* navと指定していました */
width:70px;
float:left;
line-height:30px;
height:30px;
border-left:1px solid #000;
}

　たまたま画面ではfloatが解除されたのは、親コンテナブロックの幅が150pxだったからです。その証拠に、
#navi li:nth-child(3) {
clear:both;
border-left:none;
}
がなくても、下の段に移動します。

印刷スタイルシートでは、pxの値はしばしばトラブルの原因となります。CSS2.1で変更になりました。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.

Note that this definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.)
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Syntax and basic data types( http://www.w3.org/TR/CSS2/syndata.html#length-units )］より

　印刷用の場合は、cmやmmもしくは、ptやpcで指定するほうが確実です。

　なお、floatにいったん指定した要素にclearを指定しても本来は利きません。有効なブラウザもあります。
nth-child(n)はCSS3のセレクタです。いくつかの数で折り返したいときは、nth-child(2n)とかnth-child(3n)ですかね。
　CSS2.1で書けば
#navi li+li{}
#navi li+li+li{}
#navi li+li+li+li{}
と隣接セレクタを使う。
　それでもIE5など古いブラウザには無効なので、コンテナブロックの幅をfloatさせる要素の２個以上３個未満の幅に指定するほうが楽です。単位は絶対単位で!!

回答No.1

ORUKA1951

それ以前の設定で、floatされている要素でclearしてもclear出来ないのが本来の仕様です。clearされるのはIEのバグ・・
　多分他のブラウザではclearされない。

　この場合、ボックスとなるコンテナブロック(ul)の幅を決めてfloatさせれば、clearの必要はないはずです。

ul#navi,ul#nav li{
list-style:none;/* IEバグ対策(displayを指定してもマーカーが残る */
display:block;margin:0;padding:0;
}
ul#navi{width:150px;}
ul#nav li {
width:70px;
float:left;
line-height:30px;
height:30px;
border-left:1px solid #000;
}