选择与空格和CSS引起的光标位置不匹配 [英] Selection does not match cursor position caused by white-space and css

问题描述

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

I noticed that a selection on my web page is not matching the cursor position. I dug deep and found following causes:

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

1. White-space between start tag <p> and first sentence,
2. Css: p:first-letter { font-size: 1.2em; },
3. Chrome browser (? maybe not the only one).

这里是最小的例子:

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/r1jyz​​Lkt/1/

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

我发现这确实很奇怪.谁能向我解释这个问题，以及如何在保留空白和CSS的同时进行修复?谢谢！

I find this really weird behavior. Can anyone please explain this to me and how to possibly fix it while keeping both white-space and CSS? Thanks!

更新:我不太在乎首字母的选择，这是我正在观察的动画，您看到错误的偏移量了吗?

Update: I do not really care about the first letter selection, here is the animation what I am observing, do you see the wrong offset?

推荐答案

可以使用html注释吗?

Can you use html comment?

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

这篇关于选择与空格和CSS引起的光标位置不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！