Home > Mac > Internet Explorer text-alignを指定した要素内で文字列とリンクが機能する位置とがずれる

text-alignを指定した要素内で文字列とリンクが機能する位置とがずれる

text-alignプロパティの値がleft以外である要素内にリンクを設置しているとき、実際にa要素の内容物がある位置と、text-alignプロパティがデフォルト値のときにa要素の内容物が表示されるであろう位置の両方がリンクとして機能する。

text-alignプロパティを指定した要素内にリンクを設置しているとき、a要素の内容物がある位置とリンクとして機能する（例えばマウスポインタの形状が変化する）位置とがずれてしまうことがある。

例示

<div style="text-align:right; border:2px solid blue;">
    <a href="./">リンク</a>
</div>

div要素の内容物は右寄せにしています。a要素のリンクは文字列のある部分で反応するべきですが、MacIEではtext-alignプロパティを指定していないときに表示されるであろう位置でリンクが反応することがあるそうです。この例では、div要素内の左端部でリンクが機能することになるはずです。

テーブルセル要素では、widthプロパティに「99%」を指定したセル要素を隣に置くことで不具合を回避することができるそうです。

<table>
    <td style="width:99%;"></td>
    <td style="width:1%; text-align:right; white-space:nowrap;"><a href="./">リンク</a></td>
</table>

text-alignプロパティの値がleftの要素内でこの不具合は発生しません。以下の例のように祖先要素のtext-alignプロパティの値がleft以外であっても同様です。

<div style="text-align:center;">
    <a href="./">バグあり</a>
    <div style="text-align:left;">
        <a href="./">バグなし</a>
    </div>
</div>

MacIE5.1、MacIE5.2でこの不具合が発生するそうです。