Question

我有一个webapp，它在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开发人员工具跟踪它的高度属性是问题。如果我在开发工具中将其删除，则框会按照我的意愿显示。但是，如果我完全取消了height属性，它在Firefox或Chrome中就不会出现。

无论如何我可以在CSS中添加一个条件来说如果浏览器是IE而不添加高度？或者有更好的方法来解决这个问题吗？

非常感谢。

Answer 1

您可以使用条件评论。

<!--[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]-->

Answer 2

你想要对抗什么？ 75%将是“父元素高度的75％”。

IE不喜欢在父元素没有固定高度时以百分比衡量的高度。如果给父元素一个固定的高度，它应该工作。但我想这可能会破坏你布局的其他方面。

根据具体情况，您可以使用em单位而不是百分比来实现您所获得的效果。

例如，如果容器是单行，则可以使用0.75em而不是75%来实现相同的操作。（并不是说这会特别有用，因为它会遮挡选择框的一部分，但你明白了）

由于“高度：75％”CSS，IE8中没有显示SELECT列表

2 个答案: