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)でいいんじゃなかろうか。
