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;

正如“所以回答”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;
}