つくばぐらし

inline要素で背景画像があり、途中改行されるときに背景画像が正しくでないときの対策。

inline要素では、文字の区切りで途中改行されるが、電話番号など、途中改行してほしくない場合、その要素を途中改行されないブロックとして扱えるようにする。

例：
＜ul＞
　＜li＞ああああああああ＜/li＞
　＜li＞***-****-****＜/li＞
＜ul＞

これを、横に並べて表示する。

CSS:
li {
display: inline;
}

横幅が十分にある場合、

○ああああああああ ○***-****-****

のように表示される。背景画像も表示される。
（※○は背景画像。ここではリストマークとして使用）

が、横幅が決まっている場合、

○ああああああああ ***-
****-****

のように改行されてしまう。背景画像は、改行されたブロックについては表示されない。

ここで、zoom: 1を加えて

CSS:
li {
display: inline;
zoom: 1;
}

のように記述すると、途中改行されず、その要素は次の行に表示できる。
背景についても所望の位置に表示される。

○ああああああああ
○***-****-****

詳細については、こちらを参照。

なお、li要素を次の行でなく、inlineのままで表示したときに背景を表示する方法はこちらを参照。