Ширина выпадающего списка в IE - PullRequest
92 голосов
/ 16 сентября 2008

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

Это в основном означает, что я должен убедиться, что выпадающий ящик достаточно широк, чтобы отображать максимально длинный выбор. Это делает мою страницу очень уродливой: (* ​​1003 *

Есть ли обходной путь для этой проблемы? Как я могу использовать CSS, чтобы установить разную ширину для dropbox и dropdownlist?

Ответы [ 27 ]

102 голосов
/ 25 марта 2010

Вот еще один пример jQuery . В отличие от всех других ответов, опубликованных здесь, он учитывает все события клавиатуры и мыши, особенно щелчки:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

Используйте его в сочетании с этим фрагментом CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

Все, что вам нужно сделать, это добавить класс wide к раскрывающемуся элементу (ам).

<select class="wide">
    ...
</select>

Вот пример jsfiddle . Надеюсь, это поможет.

14 голосов
/ 16 сентября 2008

Создание собственного выпадающего списка - боль, чем стоит. Вы можете использовать JavaScript, чтобы заставить IE работать.

Он использует немного библиотеки YUI и специальное расширение для исправления полей выбора IE.

Вам нужно будет включить следующее и обернуть элементы <select> в <span class="select-box">

Поместите их перед тегом body вашей страницы:

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>

После принятия редактирования:

Вы также можете сделать это без библиотеки YUI и элемента управления Hack. Все, что вам действительно нужно сделать, это поместить onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (или все, что вы хотите) на элемент select. Элемент управления YUI обеспечивает хорошую анимацию, но в этом нет необходимости. Эту задачу также можно выполнить с помощью jquery и других библиотек (хотя я не нашел явной документации для этого)

- поправка к редакции:
IE имеет проблему с onmouseout для элементов управления select (он не учитывает наведение мыши на опции, будучи наведением мыши на select). Это делает использование мышки очень хитрым. Первое решение - лучшее, что я нашел.

12 голосов
/ 03 июня 2010

Вы можете просто попробовать следующее ...

  styleClass="someStyleWidth"
  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}" 
  onblur="this.style.position='';this.style.width=''"

Я пытался, и у меня это работает. Больше ничего не требуется.

9 голосов
/ 05 сентября 2009

Я использовал следующее решение, и, похоже, оно хорошо работает в большинстве ситуаций.

<style>
select{width:100px}
</style>

<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
  <option>One</option>
  <option>Two - A long option that gets cut off in IE</option>
</select>
</html>

Примечание: $. Browser.msie требует jquery.

7 голосов
/ 24 июня 2009

@ Так же вам нужно добавить обработчик событий размытия

$(document).ready(function(){
    $("#dropdown").mousedown(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
    $("#dropdown").blur(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
});

Тем не менее, это все равно расширит окно выбора при щелчке, а не только элементы. (и, похоже, не работает в IE6, но отлично работает в Chrome и IE7)

5 голосов
/ 21 сентября 2010

Если вы используете jQuery, попробуйте этот плагин выбора ширины IE:

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

Применение этого плагина заставляет поле выбора в Internet Explorer работать так же, как оно работает в Firefox, Opera и т. Д., Позволяя элементам параметров открываться на полную ширину, не теряя при этом внешний вид и стиль фиксированной ширины. Также добавлена ​​поддержка отступов и границ для поля выбора в Internet Explorer 6 и 7.

5 голосов
/ 16 сентября 2008

Нет способа сделать это в IE6 / IE7 / IE8. Элемент управления рисуется приложением, и IE просто не рисует его таким образом. Лучше всего реализовать свой собственный раскрывающийся список с помощью простого HTML / CSS / JavaScript, если так важно иметь раскрывающуюся одну ширину и список другой ширины.

4 голосов
/ 27 мая 2009

В jQuery это работает довольно хорошо. Предположим, что в раскрывающемся списке есть id = "dropdown".

$(document).ready(function(){

    $("#dropdown").mousedown(function(){
    if($.browser.msie) {
        $(this).css("width","auto");
    }
    });
    $("#dropdown").change(function(){
    if ($.browser.msie) {
        $(this).css("width","175px");
    }
    });

});
3 голосов
/ 15 октября 2009

Вот самое простое решение.

Перед тем, как начать, я должен сказать вам, что выпадающее меню выбора автоматически расширится почти во всех браузерах, кроме IE6. Итак, я бы проверил браузер (т.е. IE6) и написал следующее только для этого браузера. Здесь это идет. Сначала проверьте браузер.

Код волшебным образом расширяет выпадающий список выбора. Единственная проблема с решением - это onmouseover, при этом раскрывающийся список будет расширен до 420px, а поскольку переполнение = скрыто, мы скрываем расширенный размер раскрывающегося списка и показываем его как 170px; Таким образом, стрелка на правой стороне dll будет скрыта и не будет видна. но поле выбора будет расширено до 420px; что мы действительно хотим. Просто попробуйте код ниже для себя и используйте его, если вам это нравится.

.ctrDropDown
{
    width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:420px; <%-- this the width of the dropdown select box.--%>
}

<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>

Выше приведен IE6 CSS. Общий CSS для всех остальных браузеров должен быть таким, как показано ниже.

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}
2 голосов
/ 09 декабря 2009

если вы хотите простое выпадающее и / или всплывающее меню без эффектов перехода, просто используйте CSS ... вы можете заставить IE6 поддерживать: hover для всех элементов, используя файл .htc (css3hover?) С поведением (только для IE6 ) определено в условно прикрепленном файле CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...