/* CSS・スタイルシート質問スレッド【27】 */

このエントリーをはてなブックマークに追加
684Name_Not_Found
多分IEのバグだと思うし辞典にも未登録だと思う(背景で一覧検索しても
なかった)が「仕様規定外」かもしれないので辞典スレでなくて先にこちらへ

・確認したのはIE6標準モード
インライン要素へ背景画像を指定して repeat-x 表示させた時,
そのインライン要素が2行にまたがる場合に2行目(折り返した後の部分)の
背景が表示されない
Moz1.6とOpera7.23では全部表示される

例:
p { width: 7em; } /* 単に折り返させるためだけに指定 */
em { background: url(wave.png) repeat-x; } /* wave.png は10px*3pxの画像 */

<p><em>あいうえおかきくけこ</em><em>あいうえおかきくけこ</em></p>

例えばブラウザのレンダリングが
|あいうえおかき
|くけこ あいう
|えおかきくけこ
(縦棒は見易さのため)となる場合,IEでは2行目の「くけこ」と3行目の
「えおかきくけこ」の背景が表示されない

また,backgroundの指定にbottomを追加する(本来インライン要素では
background-positionは指定できないが,やってみる)と
IE6では今度は「折り返す前の部分」の背景が表示されなくなる
MozとOperaでは表示される(なお,いずれのブラウザでもbottomに表示してくれる)

やりたかったのは強調語句に(画像で)下波線を引きたかったんだけど
インラインのbg-positionは本来指定できないならバグだろうとなかろうとダメだな
(ブラウザがよきに計らってくれてるから指定しておくという考えもアリかも)