Chrome：纯文本突出显示答案

【问题标题】：Chrome: Text-Only HighlightingChrome：纯文本突出显示
【发布时间】：2012-06-20 15:20:14
【问题描述】：

我不敢相信我在问这个问题，但是，有没有办法让 Chrome 在突出显示内容时像 IE 一样运行？当简单地从左到右拖动多个元素时，Chrome 似乎更喜欢突出部分或整个元素，而不是像 IE 那样仅突出显示文本。

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 没有。

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：