Chrome: Text-Only Highlighting

问题

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.

回答1:

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

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

回答2:

Use margins on div.box instead of vertical padding.

.box {
    margin:20px 0;
    width: 100px;
    padding: 0 40px;
}

来源：https://stackoverflow.com/questions/11086511/chrome-text-only-highlighting

标签

css

google-chrome

text

highlighting