Установка высоты SELECT в IE

Question

IE, кажется, игнорирует высоту, установленную в CSS при рендеринге HTML SELECT. Есть ли обходной путь для этого или мы должны просто признать, что IE будет выглядеть не так хорошо, как другие браузеры?

Answer 1

Для этого нет обходного пути, кроме отказа от элемента select.

Answer 2

Правильно, что для этого нет обходного пути, кроме исключения элемента select, но если вам нужно только показать больше элементов в списке выбора, вы можете просто использовать атрибут size:

<select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

При этом у вас появятся дополнительные пустые строки, если длина вашей коллекции меньше значения размера.

Answer 3

вы можете использовать комбинацию размера шрифта и высоты строки, чтобы увеличить размер шрифта, но, очевидно, только в тех случаях, когда вам нужен шрифт большего размера

редактировать:

Пример -> http://www.bse.co.nz РЕДАКТИРОВАТЬ: (эта ссылка больше не актуальна)

выборка рядом с большим окном поиска имеет следующие правила CSS:

#navigation #search .locationDrop {
    font-size:2em;
    line-height:27px;
    display:block;
    float:left;
    height:27px;
    width:200px;
}

Answer 4

Да, вы можете.

Мне удалось установить высоту моего SELECT точно на то, что я хотел в IE8 и 9. Хитрость в том, чтобы установить для свойства box-sizing значение content-box. При этом область содержимого SELECT будет установлена ​​на высоту, но имейте в виду, что значения margin, border и padding не будут рассчитываться по ширине / высоте SELECT, поэтому настройте эти значения соответственно.

select {
    display: block;
    padding: 6px 4px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height: 15px;
}

Вот рабочий jsFiddle . Не могли бы вы подтвердить и отметить соответствующий ответ?

Answer 5

Для этого есть обходной путь (по крайней мере, для множественного выбора):

• set select size атрибут для размера списка опций (используйте JavaScript или установите любое другое достаточно большое число)
• set select max-height вместо height атрибут для желаемой высоты (проверено в IE9)

Answer 6

Наконец найдено в http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html простое решение (по крайней мере, для IE8):

font-size:      1.0em;

Кстати, для Google Chrome нашел этот обходной путь в Как стандартизировать высоту поля выбора между Chrome и Firefox? * /

-webkit-appearance: menulist-button;

Answer 7

Даже если установка значения CSS height для элемента select не работает, заполнение атрибут работает нормально. При установке верхнего и нижнего отступов ваш элемент выбора будет выглядеть выше.

Answer 8

Используйте библиотеку пользовательского интерфейса, например jquery или yui , которая предоставляет альтернативу нативному элементу SELECT, как правило, как часть реализации комбинированного окна.

Answer 9

select{
  *zoom: 1.6;
  *font-size: 9px;
}

Если вы измените свойства, размер select также изменится в IE7.

Answer 10

Вы можете использовать замену: jQuery Chosen . Это выглядит довольно круто.