1

我在图像占用额外空间时遇到了困难，尽管它设置为显示：css 中的块。这只发生在 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

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

4

1 回答 1

0

由于您使用的是 XHTML，我假设您希望您的标记是语义的。所以从技术上讲，/siteimages/forms/bottom.jpg与/siteimages/forms/top.jpg人们的照片相比，这些图像没有任何意义。既然它只是一种装饰，那么为什么不使用backgroundCSS 属性设置它们的样式并将它们应用到您的<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;并确保清除父容器中的浮动。

例如。这是您网站的片段，我将我添加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/

于 2013-03-14T18:04:57.220 回答