首字母导致Chrome高亮显示错误位置

Question

当我使用这个CSS代码来为文本的第一个字母设置样式时，在Chrome中会出现一些奇怪的情况：

main p::first-letter {
  font-size: 300%;
}

<main>
  <p>
    This is some sample text
  </p>
</main>

当我现在选中单词"is"时，单词"sample"中的字母"pl"会被选中。您可以在此处进行测试：jsfiddle 为了更清楚地说明，以下是发生的情况：

正如您所看到的，高亮显示的文本位置不正确。

这是我的错误还是Chrome的错误？我该怎么修复它？

- Jens Renders

---

是的，我同意@Sandeep的观点...你遇到了什么错误？ - praveen

我的意思是，当你在某些文本上单击并拖动时，它会变成蓝色，但在代码中它会在错误的位置变成蓝色，应该使用“选择”而不是“高亮”吗？ - Jens Renders

这不只是针对300%的问题，如果你把第一个字母的大小设置为100%，同样的错误也会出现。 - timo

刚在 SO 应用上测试了一下，结果还是一样。快速解决方法：使用 span 标签包裹第一个字母，并将这些 span 设置为特定段落的 300%。 - user2917245

这个问题和答案完全相同：“这是Chrome/ium/WebKit中的一个错误：https://code.google.com/p/chromium/issues/detail?id=17528”，在这里也适用。 - timo

Answer 1

我发现这个问题的原因是在 <p> 后面加上了 "return"。所以为了避免这种行为，你需要将标签 <p> 和它的内容写在同一行，如下所示：

<p>This is some sample text</p>

而不是这样

<p>
    This is some sample text
</p>

我没有找到其他的解决方案... 抱歉。

- Zagonine

---

谢谢，至少这提供了一个解决方法 :) - Jens Renders

Answer 2

最佳代码将支持每个浏览器

<main>
<p>
   <span>T</span>his is some sample text
</p>

main p span{
font-size: 300%;

}

- user25775

---

如果您想要与 OP 相同的效果，则跨度应该围绕 T。 - timo