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

症状

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

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

例示

<div style="text-align:right; border:2px solid blue;">
<a href="../macie.html">MacIEバグリスト</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="../macie.html">MacIEバグリスト</a>
</td>
</table>
MacIEバグリスト

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

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

修正状況

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

関連記事

スポンサーリンク

子にブロックレベル要素を含むins, del要素もインライン要素になる

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る