Chrome：纯文本突出显示

Question

我不敢相信我在问这个问题，但有什么方法让Chrome在突出显示内容时像IE一样运行？当简单地在多个元素之间从左向右拖动时，Chrome似乎喜欢突出显示部分或整个元素，而不是纯文本，就像IE一样。

下面是一个例子：http://jsfiddle.net/cpMtK/

 

铬突出：

IE突出：

我已经尝试使用：

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

的建议在SO回答here，刚刚停用所有高亮。然后我看着user-select，发现它有一个text选项，而不是none。所以我申请了，但效果与none一样。

我也尝试应用none设置*和选择性地将text一定的通用文本标记，如span，p，h1，等等，但它仍然表现相同的方式。

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

更新

我需要与padding抵消的内容，我广泛使用的:hover，这大大增加了元件的命中面积，而margin没有。

Answer 1

如果您确实想保留填充，请使用子元素。

演示：
http://jsfiddle.net/cpMtK/2/

Answer 2

使用边距div.box而不是垂直填充。

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