Кросс-браузерные несовместимые полосы прокрутки

Question

Мне сложно найти слова, чтобы описать эту проблему.

Пожалуйста, посмотрите эту скрипку , например, код.

Эта проблема возникла изиспользуя плагин jQuery ^[1] для замены select элементов чем-то более настраиваемым.По сути, я хочу, чтобы абсолютно позиционированный div имел минимальную ширину.

Когда в списке нет полосы прокрутки, браузеры, похоже, отображают div одинаково.

Когда список слишком длинный:

• IE9 добавляет полосу прокрутки к внешней части области содержимого, добавляя к минимальной ширине
• , все остальные браузеры добавляют полосу прокрутки к внутренней части области содержимого, сохраняя минимальное значение.ширины, при необходимости добавляя горизонтальную полосу прокрутки.
• IE9 в режиме совместимости возвращается к отображению полосы прокрутки аналогично другим браузерам.

Я хотел бы иметь возможность отображать списокодинаково для всех браузеров.В идеале я хотел бы иметь чисто CSS-решение без каких-либо взломов браузера или условных комментариев.

[1] Я никоим образом не связан с "abeautifulsite.net"

Answer 1

Все браузеры по-разному обрабатывают полосы прокрутки.Все разной ширины и некоторые уже включены в ширину элемента, даже если они не используются, когда другие добавляются к ширине элемента, когда они появляются.

Со следующим плагином jQuery jScrollPane , вы можете настроить полосы прокрутки с помощью CSS.Это не идеальное решение, поскольку вы потеряете полосы прокрутки по умолчанию.Но с другой стороны, вы будете иметь точный кросс-браузерный контроль над шириной элемента.

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Answer 2

Это похоже на то же самое для меня в FF 3.6 и IE8, у меня нет IE9, поэтому не могу сказать:

  #scroll
{
border:  5px  solid #000;
height: 100px;
left:  0;
padding: 10px;
position: absolute;
top:  0;
min-width: 100px;
overflow-y:  scroll;
overflow-x:  visible;
}