Хром: только выделение текста

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, что значительно увеличивает площадь HIT-элемента, тогда как margin не делает.

Answer 1

Используйте дочерний элемент, если вы действительно хотите сохранить набивку.

Демо:
http://jsfiddle.net/cpMtK/2/

Answer 2

Используйте поля на div.box вместо вертикальной прокладки.

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