zz log

zaininnari Blog

勝手に追加:IE6のCSSバグを視覚的にチェック


に感動して、コメントにあった、「contentプロパティの対応」をやってみた。

»勝手に追加:IE6のCSSバグを視覚的にチェック

ソース

<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」の文字を覆い隠す。