マウスカーソルとテキスト選択の位置が合わなくなる

Firefox GoogleChrome

とあるサイトでマウスカーソルと選択文字が合わない事象が発生して、疑問に思ったのでちょっと実験してみた。

どうも、inlineな要素にpadding-topのとline-heightを大きめに取ると、この現象が起こるみたい。

ソース

<p>
  <span style="padding-top: 1em; line-height: 1em;">
    一行目: hogehogehogehogehogehogehogehogehogehogehoge
    <br>
    二行目: barbarbarbarbarbarbarbarbarbarbarbarbarbar
    <br>
    三行目: foofoofoofoofoofoofoofoofoofoofoofoofoofoo
  </span>
</p>

GoogleChromeでのpadding-bottom

あと、padding-topをpadding-bottomに変えると、GoogleChromeではもっと可笑しなことになる。

一方

Operaは正常だった。

追記

Operaも全くの正常というわけではなかった。選択は普通に出来ているように見えるけど、コンテキストメニューを出そうとすると洗濯がクリアされてテキスト選択時のメニューが出てこない。