html - 选择与由空白和 css 引起的光标位置不匹配

Question

我注意到我网页上的选择与光标位置不匹配。我深入挖掘并发现了以下原因:

1. 开始标记之间的空白 <p>和第一句话，
2. CSS:p:first-letter { font-size: 1.2em; } ,
3. Chrome 浏览器(？也许不是唯一的浏览器)。

这是一个最小的例子:

HTML:

<p>
    Try to select me. See? Broken (in Chrome at least).
</p>
<p>This one is just fine because there is no whitepsace</p>

CSS:

p:first-letter {
    font-size: 1.5em;
}

JsFiddle:http://jsfiddle.net/r1jyzLkt/1/

我发现这种行为非常奇怪。任何人都可以向我解释这个以及如何在保留空白和 CSS 的同时修复它吗？谢谢!

更新:我不太关心第一个字母的选择，这是我正在观察的动画，你看到错误的偏移量了吗？

Answer 1

可以用html注释吗？

<p><!--
    -->Try to select me. See? Broken (in Chrome at least).
</p>