IEでcontentもどき

IEは未だにcontent*1に対応していない。
これに対応していないと、
HTML-lintで100点なら良いのか
にある方法を使っても、セパレータがないから格好が付かない。


今日、"|"限定でIE*2でも無理やりセパレータを実現してしまう方法を思いついた。
まず、スタイルシートをIE以外とIE用に上書きするものに分けて読み込む。

<link rel="style-sheet" type="text/css" href="main.css">
<!--[if IE]>
<link rel="style-sheet" type="text/css" href="ie.css">
<![endif]-->


本体のHTMLはこんな感じ。

<ul>
<li>hoge</li>
<li>piyo</li>
<li>foo</li>
<li>bar</li>
</ul>

本来ならIDとかclassが付いてたり、liの中にaがあったりするけど、とりあえず最小の例で。


で、main.cssは普通。

 * { margin:0; padding:0; }
li { display:inline; list-style-type:none; }
li:after { content:"\3000|"; }


肝心のie.cssはこんな感じ。

ul { float:left; padding:0; margin-left:-1em; background-color:black; }
li { margin:0; margin-right:1px; background-color:white; padding:0 0.5em; 0; 1em; }

軽く説明をすると、ulの背景色をセパレータの色にして、それをセパレータに見せかける感じ。
liは右に1px以外はulにぴったりくっついているから、要素間の幅1pxを残してulの背景色はliに消されてしまう。


要素間のみにセパレータが欲しい場合は、:afterじゃなくて:beforeにして、:first-childでcontentを空文字列にすれば良いのかな。
IEの場合も、rightじゃなくてleftにして、:first-childだけmargin-leftを0にするとか。
試してないけど、多分うまくいく。うまくいかなかったら最後のliに適当にID割り当てて、contentを空文字&margin-leftを0pxにすれば多分OK.


追記:
よく考えたら、liをinlineにしてborder-right(もしくはleft)でいいんじゃなかろうか。

*1:CSSのね

*2:IE7でしか試してないけど