Ширина options select IE
Как вы знаете в Интернет експлоере есть такая неприятная штука как если вы укажете фиксированную ширину select например в 50 пикселей, то и выпадающие свойства будут такого же размера, когда как в остальных браузерах выпадающие свойства растягиваются на ширину самого длинного option. То есть в ИЕ у вас всё обрежится, что не есть красиво.
Выглядит это примерно так:
А в других браузерах так:
К сожалению как полностью сделать идентичные я не знаю, но знаю как сделать что бы поля не резались. Выглядеть будет так:
Делается следующим образом. Для начала скриптец:
-
$(".sel-4").mousedown(function(){
-
if($.browser.msie) {
-
$(this).css("width","auto");
-
}
-
});
-
$(".sel-4").change(function(){
-
if ($.browser.msie) {
-
$(this).css("width","50px");
-
}
-
});
-
$(".sel-4").blur(function(){
-
if ($.browser.msie) {
-
$(this).css("width","50px");
-
}
-
});
Для того что бы работало необходима библиотека jquery.
Идея скрипта такова что при нажатии на селект, у вас поле селект и опшенсы стают по длине самого длинного поля (width:auto;). То есть разъезжаются.
Для того что бы не портился дизайн, то есть не выталкивались какие то сбоку стоящие элементы нужно прописать для этого селекта абсолютное позиционирование.
-
.sel-4 {
-
position:absolute;
-
z-index:34;
-
}
В случае если у вас несколько селектов в ряд, нужно каждому элементу который правее ставит z-index меньше, что бы левый наползал сверху на правый, и не кто никого не выталкивал.
Не самый красивый способ решить эту проблему, но работающий.
Комментарии
а можно сделать так как на
а можно сделать так как на етом сайте http://ie-select-bug.life-super.com/. тут всего навсего надо подключить jquery плагин и прописать айди у елементов которые надо пофиксить
Спасибо. Буду теперь юзать
Спасибо. Буду теперь юзать тот плагин. Как то он мне не попался когда была проблемка.