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回答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; 
}