Question

我在IE 7中无法正常工作，在所有其他浏览器中都能正常工作，但如果你在IE 7中查看http://jamessuske.com/thornwood2/，你会发现topCotent和contentArea之间存在两个空白contentArea和contentBottom之间的差距。

不知道如何解决这个问题。

HTML CODE

<div class="topContent">
<img src="images/top.gif" width="1009" height="37" border="0" />
</div><!--topContent-->

<div class="leftContent">
<img src="images/leftSide.gif" width="48" height="494" border="0" />
</div><!--leftContent-->

<div class="contentArea">

</div><!--contentArea-->

<div class="rightContent">
<img src="images/rightSide.gif" width="49" height="494" border="0" />
</div><!--rightContent-->

<div class="bottomContent">
<img src="images/bottom.gif" width="1009" height="39" border="0" />
</div><!--bottomContent-->

CSS代码

.topContent{
width:1009px;
}

.leftContent{
float:left;
}

.contentArea{
background:#FFF;
width:912px;
min-height:494px;
float:left;
}

.rightContent{
float:right;
}

.bottomContent{
width:1009px;
}

Answer 1

为类添加高度，如下所示，这将解决您的IE 7问题

.topContent{
  width:1009px;
  *height:37px;
}

.leftContent{
  float:left;
  *height:494px;
}


.rightContent{
  float:right;
  *height:494px;
}

Answer 2

<img>元素是内联元素。这意味着它具有vertical-align属性，默认情况下设置为bottom。出于某种原因，如果块级元素（如<img>）包含<div>，则会导致问题。

这就是你的差距所在：由于某种原因，IE在包含这些图像的<div>元素的底部添加了一点空间。（它也是对你的.bottomContent元素执行此操作;这更难以注意到/没有那么大的交易。）

修复就像这样简单：

.topContent img, .leftContent img, .contentArea img, .rightContent img {
    display:block
}

（如果出于某种原因，您不喜欢/不能声明display:block，则可以改为使用vertical-align:top。）

CSS / HTML IE 7问题

2 个答案: