勝手に追加:IE6のCSSバグを視覚的にチェック
に感動して、コメントにあった、「contentプロパティの対応」をやってみた。
ソース
<table> <caption> IE6のCSSバグチェック </caption> <tr> <th scope="col">現象</th> <th>チェック</th> </tr> <tr> <th scope="row">contentプロパティの対応</th> <td><div class="bug13"> <div class="div0"><img src="white.png" alt="空白" width="50" height="30" /></div> </div></td> </tr> </table>
.div0:before { content:url("space50-30.gif"); }
意外とシンプル!
仕組み
contentプロパティに対応していない場合は、
白画像により、「OK」の文字を多い隠して、「NG」の文字を見えるようにする。
contentプロパティに対応している場合は、
白画像の前に、before 擬似要素により、
「OK」の文字の位置に透過gifの画像を置き、白画像は、透過gifの画像分右に追い出され、「NG」の文字を覆い隠す。