Home > Mac > Internet Explorer インラインボックス化したブロック要素の背景が左方に広がる

インラインボックス化したブロック要素の背景が左方に広がる

親ブロック要素のtext-alignプロパティにcenter値かright値を設定し、その子要素に背景を設定しさらにインラインボックス化（display:inline;）すると、子要素のボックスがtext-alignプロパティがデフォルト値のときに内容物が表示される位置にまで広がってしまい、前方のリストアイテム要素の内容物の上に覆いかぶさる。

Category: Internet Explorer, Mac

例示

<ul style="text-align:center;">
    <li style="display:inline; background:white;"><a href="./">WinIE</a></li>
    <li style="display:inline; background:white;"><a href="./">MacIE</a></li>
    <li style="display:inline; background:white;"><a href="./">Opera</a></li>
</ul>

バグが発生すると、内容物が「Opera」のli要素の背景が前方のli要素の内容物である「WinIE」と「MacIE」を隠すので、行内で右端にある「Opera」しか表示されません。ただし、内容物が隠れていてもリンクは機能します。