Проблемы ширины при использовании выбора HTML в DIV с использованием IE

Question

Вот пример, который я поставил jsfiddle

<div style='width:30px;border:solid 1px'>
  <select style='width:100%'>
    <option>This is my first option</option>
    <option>option</option>
  </select>
</div>

<br/>
<br/>

<div style='width:300px;border:solid 1px'>
  <select style='width:100%'>
    <option>This is my first option</option>
    <option>option</option>
  </select>
</div>

В любом браузере (FF, Chrome, Safari, IE9, IE9 в режиме IE8), кроме IE 7/8, параметры первой комбинации полностью видны. IE8 ограничивает ширину опций шириной внешнего div.

Вот это

Есть идеи, как это исправить?

Answer 1

Добавление overflow: hidden; к стилю div и width: auto; float: right; к <select>, кажется, работает для меня.

<div style='width:30px;border:solid 1px; overflow: hidden'>
   <select style='width:auto; float: right;'>
      <option>This is my first option</option>
      <option>option</option>
   </select>
</div>

См. Рабочий пример на http://jsfiddle.net/J7sYq/10/

Answer 2

К сожалению, нет решения CSS для этого, поскольку оно относится к поведению элементов.Таким образом, я направлю вас к другому источнику.http://css -tricks.com / select-cuts-off-options-in-ie-fix / Это изменяет ширину элемента, когда на него фокусируется, и сбрасывает его, когда он теряет фокус.Не очень элегантно, но все же позволяет увидеть весь вариант.Надеюсь, это поможет.

Answer 3

Я знаю, что здесь уже есть целая куча ответов. Но ни один из обходных путей действительно не отвечал моим требованиям, когда я столкнулся с той же проблемой: мне нужно поместить select внутри div с фиксированной шириной. За пределами ширины он будет скрыт, и я не хочу это видеть - это просто безобразно. Когда я впервые увидел эту ссылку, я, наконец, нашел то, что хочу. Но после игры с демо я был разочарован. Уловки CSS работают немного, но они изменят ширину в целом, а не только выпадающий список. Что мне нужно, так это действительно красивый выбор, который должен выглядеть в других браузерах, кроме IE.

Я, наконец, решил это сам, используя javascript и css плюс некоторую проверку на конкретную версию. Это краткое изложение того, что я сделал:

1. Используйте прозрачный div того же размера, что и выбор, чтобы покрыть выбор. Теперь мы все еще можем видеть элемент под div, но не можем щелкнуть по нему.
2. Прозрачный div теперь перехватывает щелчок мышью и заполняет неупорядоченный список элементами из выбора. Затем мы показываем список прямо под оригинальным выбором. Это выглядит точно так же, как нажатие выбора в других браузерах.
3. Когда элемент выбран в неупорядоченном списке, список будет скрыт, и будет выбран соответствующий элемент в исходном списке.

Этот подход требует больше кода, но он действительно моделирует "правильное" поведение выбора. Неупорядоченный список стилизован с помощью CSS, что упрощает изменение внешнего вида. Протестировано под ie7-8.

Ниже приведен скриншот рабочего проекта, который просматривается в 8:

---

Answer 4

Вот что у меня работает:

<div style='max-width:300px;min-width:300px;border:solid 1px'>
<select style='width:300px'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
<br/><br/>

Answer 5

Не знаю ни одного решения (это фантастический мир IE).Может быть, другой виджет для IE8 или менее (extjs combo, jquery ui combo или некоторая библиотека поп-меню).

Answer 6

Вы указали ширину для внешнего div, состоящего из поля выбора.И это выглядит одинаково для меня во всех браузерах.

Если вы хотите растянуть его в зависимости от длины параметров в поле выбора, просто не указывайте ширину или просто говорите ширину,Проверьте это http://jsfiddle.net/J7sYq/3/

Answer 7

используйте * перед вашим свойством CSS, т.е. для конкретного CSS.Когда помечено * только ie8 может понимать

p.myclass {
     width: 30px;
     *width: 300px;
}/* Just an example*/

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