css - 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 答案中所建议的那样，它只是禁用了所有突出显示。然后我查看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;
}