Question

我在拍摄额外空间时遇到了困难，尽管它设置为显示：css中的块。这只发生在IE7上。当我删除HTML代码中标记之间的所有空格时，问题就解决了，但这不是一个合适的解决方案。

我听说过一些IE7 hacks，比如设置一个固定的宽度/高度以及下面的css：

display:inline-block;
zoom:1;
*display:inline;

但这对我不起作用（可能是因为我使用XHTML严格）。

我正在处理的页面如下：http://www.morgana.nl/slaaptest/afspraak.html

顶部图像是设置为display：block的图像，后面是带蓝色背景的div。

链接到图片：http://www.morgana.nl/temp/ie7-display-block.png

希望得到一些有用的帮助...

Answer 1

由于您正在使用XHTML，我假设您希望您的标记是语义的。因此，与人们的照片相比，技术上/siteimages/forms/bottom.jpg和/siteimages/forms/top.jpg不具有任何意义的图像。既然它只是一种装饰，那么为什么不使用background CSS属性对它们进行样式化并将它们应用到<div>容器中以达到同样的效果呢？

例如

.roundedTopBar {
    padding-top: 10px;
    background: transparent url('/siteimages/forms/top.jpg') 0 0 no-repeat;
}
.roundedBottomBar {
    padding-bottom: 10px;
    background: transparent url('/siteimages/forms/bottom.jpg') 0 100% no-repeat;
}

<div class="half2 roundedTopBar">
   <div class="roundedBottomBar">
      <div class="formsContainer">
        ...
      </div>
   </div>
</div>

已添加：如果您确实想知道如何完成最初要求的问题，解决方法是不使用display: inline-block，因为IE 7会将其搞砸。使用float: left; clear: both; display: block;并确保清除父容器中的浮动。

EG。这是您网站的摘录，我添加newCSS命名空间我添加的新内容，您可以使用您认为合适的选择器名称

CSS：

.newCSS .clearFloat{
    overflow: hidden;
    width: auto;
}
.newCSS .inlineBlock {
    clear: both;
    display: block;
    float: left;
}

标记：

<div class="half2 clearFloat newCSS">
    <img src="http://www.morgana.nl/siteimages/forms/top.jpg" width="441"
    height="12" class="block inlineBlock" alt=""/>
    <div class="formsContainer block inlineBlock">
        <div class="formsInnerContainer" style="height:474px">
        form was here
        </div>
    </div>
    <img src="http://www.morgana.nl/siteimages/forms/bottom.jpg" class="block inlineBlock" alt=""/>
</div>

请参阅小提琴：http://jsfiddle.net/amyamy86/c34ny/

如果你在IE7上观看（它不喜欢jsFiddle）：http://jsfiddle.net/amyamy86/c34ny/embedded/result/

IE7和HTML严格显示块

1 个答案: