css - Chrome : Text-Only Highlighting

Question

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

这是一个例子: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

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

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