IE7和HTML严格的显示块

Question

尽管在 css 中设置为 display:block，但我在处理占用额外空间的图像时遇到了困难。这只发生在 IE7 上。当我删除 HTML 代码中标签之间的所有空格时，问题就解决了，但这不是一个合适的解决方案。

我听说过一些 IE7 hack，比如设置固定宽度/高度和以下 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; 并确保清除父容器中的浮动。

例如。这是来自您网站的 sn-p，我将 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/