文本选择突出显示太多

文本选择因填充而导致在任一侧突出显示太多。文本选择突出显示太多

Text Selection Example

如何解决这个使用CSS？我试过了一堆不同的东西，其中没有一件看起来可行。（即试图使用保证金和其他财产）。

我已经遇到过这个问题多次，从来没有能够弄明白。

如果有人能告诉我如何解决这个问题，也许可以解释如何计算文本选择高亮，我将非常感激。

看来，这不是发生在Firefox/Opera（不能测试IE），它可能只限于基于webkit的浏览器。

解决：

添加position: relative任何填充元素（这可能是一个错误的WebKit）。

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

2012-07-28 James Kyle

什么浏览器？在Firefox 14和IE9中，我得到了正常的选择，即选择文本的正常方式。在Chrome最新版本中，我会看到您的图片显示的内容。 – 2012-07-28 19:29:56

我相信突出显示是由浏览器处理的。我猜你正在使用Chrome。如果您使用Firefox尝试相同的功能，您会注意到只有文本被突出显示。 – Zhihao 2012-07-28 19:29:57

好吧，我如何让它在整个浏览器（包括webkit）中保持一致？ – 2012-07-28 19:31:14

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

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

不知道，在您的情况是可能的。

2012-07-28 19:40:16

当然很奇怪。按照你的说法设置它，然后重置，并且它仍然有效。尝试在'h1'上，'h1'和第一个'p'之间的差距仍然存在问题：http://jsfiddle.net/pA7BJ/18/ – 2012-07-28 19:45:49

将包装器设置为相对于我而言：http：/ /jsfiddle.net/LJLdW/ – 2012-07-28 19:48:38

这似乎确定了它。 – 2012-07-28 19:51:38

更改的div.sizing-container到75px 0px 75px 0px填充会解决这个问题。由于此元素上的填充，突出显示非常大。

然后，你需要更改地址：

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

身体。然后添加10px填充到.sizing-container

为我修复它。这就是我所能说的。

2012-07-28 19:34:03 Shawn31313

这真的不是一个解决方案... – 2012-07-28 19:35:44

好吧，这不是坏事。对不起，至少我试过了。 – Shawn31313 2012-07-28 19:39:50

回答