Список SELECT не отображается в IE8 из-за CSS "height: 75%"

Question

У меня есть веб-приложение, которое отображает список имен в качестве параметров в блоке SELECT:

<select name="names" .... >
    <option value="Lee">
    <option value="Jamie">
    <option value="Alex">
</select>

Затем я применяю некоторый CSS к блоку SELECT, чтобы изменить его размер, а что нет:

width : 100%
height : 75%

Это прекрасно работает на Chrome и Firefox, но не на IE8.В IE8 блок SELECT вообще не отображается, хотя, конечно, он включен в источник.Я разыскал это с помощью инструментов разработчика IE8, чтобы атрибут высоты был проблемой.Если я уберу это в инструментах разработки, окно появится так, как мне бы хотелось.Однако, если я полностью уберу атрибут высоты, он не будет отображаться так, как хотелось бы в Firefox или Chrome.

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

Большое спасибо.

Answer 1

Что вы пытаетесь измерить? 75% будет «75% высоты родительского элемента».

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

В зависимости от контекста, вы можете достичь желаемого эффекта, используя em единиц вместо процентов.

Например, если контейнер представляет собой одну строку, вы можете получить то же самое, используя 0.75em вместо 75%. (не то, чтобы это было бы особенно полезно, так как это затенило бы части поля выбора, но вы поняли)

Answer 2

Вы можете использовать условные комментарии.

<!--[if IE 8]> 
  <link href="/css/ie_8.css" rel="stylesheet" type="text/css"> 
<![endif]-->

В приведенном выше примере вы ссылаетесь на конкретную таблицу стилей IE8. Это было бы в голове документа.

Вы также можете просто добавить стиль к рассматриваемой странице.

<!--[if IE 8]>
   <style type="text/css">
       .list{height:100%;}
   </style>
<![endif]-->