Chrome：纯文字突出显示

Question

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

以下是一个示例：http://jsfiddle.net/cpMtK/

Chrome突出显示：

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

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

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

Answer 2

如果你真的想保留填充，请使用子元素。演示：
http://jsfiddle.net/cpMtK/2/