Chrome：纯文字高亮显示 [英] Chrome: Text-Only Highlighting

问题描述

我不敢相信我在问这个问题，是否有任何方法可以让Chrome功能像IE当高亮显示内容？当简单地从左向右拖动多个元素时，Chrome似乎喜欢突出显示部分或整个元素，而不是像文本一样突出显示。

这里有一个例子： a href =http://jsfiddle.net/cpMtK/ =nofollow noreferrer> http://jsfiddle.net/cpMtK/

Chrome突出显示：

IE突出显示：

img src =https://i.stack.imgur.com/U7f9v.pngalt =enter image description here>

我试过使用：

  -webkit-touch-callout：无; 
 -webkit-user-select：none; 
 -khtml-user-select：none; 
 -moz-user-select：none; 
 -ms-user-select：none; 
 user-select：none;如SO回答中所建议的，
  

这里，刚刚禁用所有高亮。然后我查看用户选择，发现它有一个文本选项，而不是 none 。所以，我申请了，但它有与 none 相同的效果。

我也试过应用 none 设置为 * 并选择性地将 text 标签，例如 span ， p ， h1 等

有没有可用的CSS规则，或者这只是Chrome的工作方式吗？

更新

我需要用 padding 因为我广泛使用：hover ，这大大增加了元素的命中区，而 margin 不。

解决方案

如果你真的想保留填充，请使用子元素。

演示：

http://jsfiddle.net/cpMtK/2/

I can't believe I'm asking this but, is there any way to get Chrome to function like IE when highlighting content? When simply dragging from left to right across multiple elements, Chrome seems to like highlighting partial or entire elements rather than text-only, like IE does.

Here's an example: http://jsfiddle.net/cpMtK/

 

Chrome highlighting:

IE highlighting:

I've tried using:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

as suggested in an SO answer here, which just disabled all highlighting. Then I looked into user-select and found that it has a text option, rather than none. So, I applied that but it had the same effect as none.

I've also tried applying the none settings to * and selectively applying text to certain generic text tags, such as span, p, h1, etc, but it still behaved the same way.

Is there an available CSS rule or is this just the way that Chrome works?

Update

I need the content to be offset with padding as I make extensive use of :hover, which vastly increases the hit-area of the element whereas margin doesn't.

解决方案

Use a child element if you realy want to keep the padding.

Demo:
http://jsfiddle.net/cpMtK/2/

这篇关于Chrome：纯文字高亮显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！