文本选择突出显示太多

Posted 2023-03-06

【中文标题】文本选择突出显示太多

【英文标题】：Text Selection Highlighting too much

【发布时间】：2012-07-27 02:03:44

【问题描述】：

由于填充，文本选择在任一侧突出显示过多。

http://jsfiddle.net/JamesKyle/pA7BJ/

如何使用 CSS 解决此问题？我尝试了很多不同的东西，但似乎都不起作用。 （即尝试使用边距和其他属性）。

我已经多次遇到这个问题，但始终无法弄清楚。

如果有人能告诉我如何解决这个问题，或者解释一下如何计算文本选择突出显示，我将不胜感激。

在 Firefox/Opera 中似乎没有出现这种情况（无法测试 IE），并且可能仅限于基于 webkit 的浏览器。

已解决：

将position: relative 添加到任何填充元素（这可能是 webkit 错误）。

http://jsfiddle.net/JamesKyle/ejfsM/

【问题讨论】：

什么浏览器？在 Firefox 14 和 IE9 中，我得到一个正常的选择，即，只是选择文本的正常方式。在 Chrome 最新版中，我得到了你的图片显示的内容。

我相信高亮是由浏览器处理的。我猜你正在使用 Chrome。如果您在 Firefox 上尝试相同的操作，您会注意到只有文本被突出显示。

好的，我如何使它在整个浏览器（包括 webkit）中保持一致？

这很奇怪，我在 chrome 中也有同样的问题，似乎 chrome 突出显示了浏览器的整个宽度，即使你在容器中放置另一个 100% 宽度和高度的 div 它仍然溢出这个（即使它没有填充等）。老实说，不确定解决方案。

这可能是 Webkit 中的错误。 Opera 11.5 也没有这个问题，我无法测试 Safari（由于某种原因，它无法在我的计算机上运行）。

【参考方案1】：

这很奇怪。但是，更改 CSS 位置似乎可行，例如：

div.sizing-container 
    padding: 75px;
    position: relative;

http://jsfiddle.net/LJLdW/

不知道你的情况是否可行。

【讨论】：

当然很奇怪。按照你说的设置，然后重新设置试试，它仍然有效。在h1上试一下，h1和第一个p之间的差距还是有问题：jsfiddle.net/pA7BJ/18

【参考方案2】：

将div.sizing-container 的填充更改为75px 0px 75px 0px 将解决此问题。 由于此元素上的填充，突出显示如此之大。

那你需要改add：

width: 93%;
padding-left: 3%;

到身体。然后给.sizing-container添加10px padding

这为我解决了问题。我只能说这些了。