hamura.css
content : url() によるPB-100キャラクタの表示

* テキストが隠せているか?確認の為にテキストを "+" から "足" に替えています。

IE8 + ハイコントラストモード

*

background-image

+ background-image で表示。CSS generated content が CSS-P に対応しない環境用(Opera 7~7.1x, Firefox ~3.0.x)。インラインブロック要素で CSS-P が使えない環境用。(Opera 7.20 ~ 9.2x)

IE7 以下で text-indent を指定した要素が行頭にあると行頭がズレる問題

IE7 では color : transparent を使用して text-indent を使わないでテキストを隠す。-> ハイコントラストモードに対応できないので辞める。

IE5 では color : transparent を使用できないため、text-indent を使う。

+ ​ (ゼロ幅の空白)を行頭に挿入。IE5 で豆腐になってしまう。

 +   を行頭に挿入。

+   を行頭に挿入。この文字は Nintendo 3DS で豆腐になってしまう。IE5 でも豆腐になってしまう。

+   (空白)を行頭に挿入。

+   を行頭に挿入。

+ 行頭が text-indent の効いた要素。

透過

Gecko 0.9.1 だけ、背景画像の透過 png の透明色が黒くなる。透過 gif は正常。

png

_

gif

_