えむもじら

先日のリンク文字列を選択するにはというエントリの続きです。コメントでも指摘がありましたが、

リンクの文字の上または下からドラッグして選択してますねぇ
すごい微妙な操作だけど。

の真相を調べてみました。以下そのためのサンプルです。

ソースは以下のとおり。

<div style="border:1px solid; padding:0px; background: #CCC;
 line-height:2em">
<span style="background: #FFF;"><a ...>...</a></span><br />
<span style="background: #FFF;"><a ...>...</a></span>
</div>

背景が白くなっている部分が span 要素で、その上下の灰色部分が line-height による行間部分です。この行間部分からドラッグを開始して左右に動かすとリンクにマウスオーバーすることなくリンク文字列の選択ができました。これは Firefox、Opera、IE7 共通の動作です。

一方、div によるボックスに padding:10px を指定したのが下の例です。

padding 領域からドラッグを開始したときの動作は、Opera は無反応、Firefox は padding-top 領域の場合は選択可能、IE7 は上下とも選択可能という面白い結果でした結果でした。（ちなみに Opera では padding 領域からドラッグを開始して、行間領域にずらすと選択が可能になります。Firefox はだめ。）

さらに試しに、ボックスの外からドラッグしてみると、Firefox と IE7 ではボックスの上部からドラッグしても選択ができました。下側からはだめです。うーむ、奥が深い。

さらにさらに、以下のようにリンクの範囲を少し変えてみると、Firefox では上で述べた技がリンク文字列に対しては一切使えなくなりました。もう訳がわかりません。

結論： 通常、padding 領域や行間領域の範囲は明確にはわからないのですが、リンク領域にオーバーしないぎりぎりの部分でドラッグすれば選択できる場合があるということは覚えておいて損はしないかもしれません。

追記： Trunk で試したところ、全部 OK でした。つまり、ボックスの数ピクセル上から数ピクセル下まで、リンク文字列にかからない範囲であればリンク文字列の選択が可能です。ただし、ボックスの外側の有効範囲が Firefox 2 に比べて少し狭くなっています。