Ширина опций HTML Select обрезается в IE. Какие-либо решения?

css:

.set_width { width:120px; }

html:

<select class="set_width"><option>one</option><option>two</option></select>

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

<script type="text/javascript">
  window.onload = function()
  {
    var elem = document.getElementById('test');
    var values = elem.length;
    var biggest_value = 0;
    var biggest_option = '';

    for(var i = 0; i <= values; i++)
    {
      if (elem.options[i])
      {
        var len = elem.options[i].value.length;
      }

      if (biggest_value < len)
      {
        biggest_value = len;
        biggest_option = elem.options[i];
      }
    }

    document.getElementById('test').style.width = biggest_option.offsetWidth + 'px';

};
</script>

Поле выбора:

<select id="test">
 <option value="Hello">Hello</option>
 <option value="Hello Again">Hello Again</option>
 <option value="Hello Yet Again">Hello Yet Again</option>
</select>

Абсолютно простой способ убедиться в том, что выбранные списки всегда имеют нужную ширину - это позволить браузеру задать их ширину, т.е. не задавать ширину самостоятельно. Этот "метод" (на самом деле не метод, так как он включает в себя , а не , делая что-то) будет работать в каждом браузере, даже в IE6.

У меня есть решение, которое работает для меня, поэтому я подумал, что я буду идти вперед и опубликовать его (с некоторыми предостережениями внизу). Я уверен, что это не самое эффективное использование jQuery, но он работает, как я хочу, чтобы он работал. По сути, у меня есть список часовых поясов, которые (очевидно) довольно длинные текстовые струны.

<!--[if IE]>
<script type="text/javascript">
    $(document).ready(function() {
        $("select.timeZone")
        .mouseover(function() {
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto")
                .focus();
        })
        .mouseout(function() {
            $(this)
                .blur(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
                .change(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
        });
    });
</script>
<![endif]-->

Описание:

• Условно устанавливается только для IE браузеров.
• Это решение представляет собой модифицированную версию сценария, предоставленного Крисом Койером ( http://css-tricks.com/select-cuts-off-options-in-ie-fix/ ).
• Также это решение предполагает, что вы, как и я, на самом деле не заботится о IE6. Базовая функциональность там, поэтому браузеры IE6 все еще могут видеть большую часть вариантов выбора, отправьте форму и т. Д., Но я не могу больше тратить время, пытаясь успокоить эту небольшую подгруппу.

Предостережения:

• Список выбора имеет фиксированную ширину, прежде чем она сосредоточена.
• OnMouseout, список должен быть размытым или изменен до того, как размер будет установлен обратно к исходной фиксированной ширине. Причина, по которой я уверен, что список выбора был размытым или изменился первым, является, потому что ранее, OnMouseout будет стрелять, как только ваша мышь покинула поле выбора (то есть, что вы могли бы попытаться выбрать опцию, но они будут исчезнуть, прежде чем вы могли бы нажать ).
• И наоборот, на Mouseover Focus установлен, чтобы убедиться, что событие размытия уволено правильно.

Вот еще один подход, который сработал для меня:

<style>
select.limited-width {
    width: 200px;
    position: static;
}

select.expanded-width {
    width: auto;
    position: absolute;
}
</style>

<select class="limited-width" 
        onMouseDown="if(document.all) this.className='expanded-width';"
        onBlur="if(document.all) this.className='limited-width';"
        onChange="if(document.all) this.className='limited-width';">

    <option>A normal option</option>
    <option>A really long option which messes everything up</option>
</select>

Переключившись на position: absolute, вы удаляете элемент из потока страницы, что помогает, если вы найдете свой поле выбора перемещается, когда вы его расширяете.

Я решил полагаться на обнюхивание document.all как на проверку IE, поскольку он сохраняет его компактность и позволяет избежать необходимости в отдельной функции. Если это не сработает для вас, определите функцию в условных комментариях IE и вызовите ее вместо этого.

Одна небольшая ошибка: если вы выберете тот же элемент, он больше не сжимается, пока вы не переместите фокус на другой элемент, я называю это функцией; -)

Мне нравится решение 26design, но у него есть 2 недостатка:

1. При некоторых обстоятельствах можно дважды запустить событие наведения курсора мыши, в результате чего для переменной origWidth устанавливается значение «auto», предотвращающее выбор когда-либо возврат к исходному размеру.

2. Если текстовые значения в раскрывающемся списке не нуждаются в дополнительном пространстве, выделение фактически сжимается, что выглядит странно.

Эта версия устраняет обе эти проблемы:

if($.browser.msie) {
    /* IE obscures the option text for fixed-width selects if the text 
     * is longer than the select. To work around this we make the width 
     * auto whenever the drop down is visible.
     */
    $("select.fixed-width").livequery(function(){
        /* Use mousedown rather than focus because the focus event gets 
         * interrupted and the dropdown does not appear 
         */
        $(this)
        .mousedown(function(){
            if($(this).css("width") != "auto") {
                var width = $(this).width();
                $(this).data("origWidth", $(this).css("width"))
                       .css("width", "auto");
                /* if the width is now less than before then undo */
                if($(this).width() < width) {
                    $(this).css("width", $(this).data("origWidth"));
                }
            }
        })
        /* Handle blur if the user does not change the value */
        .blur(function(){
            $(this).css("width", $(this).data("origWidth"));

        })
        /* Handle change of the user does change the value */
        .change(function(){
            $(this).css("width", $(this).data("origWidth"));

        });
    });
}

Протестировано в IE6-8

Кажется, это хорошо работает, заставляя IE переоценивать ширину выбора. Работает в IE7 и IE8.

if (jQuery.browser.msie) {
    jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}