IE 中的高度显示与 Firefox 不同答案

【问题标题】：Height in IE is displaying diffrent to firefoxIE 中的高度显示与 Firefox 不同
【发布时间】：2010-05-05 23:46:52
【问题描述】：

我在 ie 中显示设定高度时遇到问题。

在我的 CSS 中，我将侧边栏 div 的高度设置为 2150px；它在 Firefox 中显示良好，但在 ie 中不显示完整高度。

如何让 ie 显示我在 ie 中设置的高度？

提前致谢

源码如下

#sidebar_newspr{
width:160px;
min-height:2150px; 
margin-top:1px; margin-right:2px;
border-right-style:solid; border-right-color:#900; border-right-width:1px;
float:left;
}
 #sidebar_newspr a{
 text-decoration:none;
 color:#FFF;
 font-size:12px; font-family:Verdana,Arial,Helvetica,sans-serif;
 }
 #sidebar_newspr a:hover{
 color:#900;
 }

【问题讨论】：

标签： css internet-explorer firefox height

【解决方案1】：

这有点摸不着头脑，因为您并没有真正指定要在哪个版本的 IE 中测试它。不过，min-height 要求 IE7 和 IE8 在标准模式下运行。要启用标准模式，您需要使用严格的!DOCTYPE。

来自the documentation：

在 Internet Explorer 7 中，min-height/max-height 属性适用于浮动和绝对定位块、内联块元素和一些内部控件。它们不适用于不可替换的内联元素，例如表格列和行/列组。（“替换”元素具有固有尺寸，例如 img 或 textArea。）

在 Internet Explorer 7 中，此属性仅在严格的 !DOCTYPE 下启用。

IE6 中的min-height 仅适用于th、td 和tr 元素。

【讨论】：

在 IE6 中高度的作用类似于最小高度。

【解决方案2】：

尝试使用条件 cmets：

<!--[if lt IE 9]> //will target IE less than version 9
        <link href="/directroy/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->

到你的 head 标签并使用这个新的样式表来定义你想让 IE 做什么。

#sidebar_newspr{
width:160px;
height:2150px; /*change to just height*/
margin-top:1px; margin-right:2px;
border-right-style:solid; border-right-color:#900; border-right-width:1px;
float:left;
}

您还可以使用多个条件 cmets 来定位不同版本的 IE。

像这样：

<!--[if IE 8]> //will target only IE 8
        <link href="/directroy/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->

然后尝试将您的文档类型设置为严格：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

可能会起作用，如果不是，那么我确定其他人有其他想法:)

【讨论】：

【解决方案3】：

某些版本的 IE 不喜欢 min-height，我尽量避免使用它。

作为一种不会像仅 IE 样式那样拖累您的页面的快速解决方案，只需声明 height:2150px; min-height:2150px; 支持 min-height 的浏览器将采用它，而不支持它的浏览器将忽略它。

【讨论】：