IE7和HTML上的显示块严格

虽然设置为在css中显示：块，但我仍然遇到图像占用额外空间的困难。这只发生在IE7上。当我删除HTML代码中标签之间的所有空格时，问题就解决了，但这不是一个合适的解决方案。IE7和HTML上的显示块严格

我已经听到了一些IE7的黑客一样设置一个固定的宽度/高度和下面的CSS：

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

但这并没有为我工作（也许是因为我使用的XHTML严格）。

我的工作页面如下：http://www.morgana.nl/slaaptest/afspraak.html

顶部图像是设置为显示图像：块，并用蓝色背景股利如下。

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

希望能对一些有用的帮助......

来源

2013-03-14 Hans

由于您使用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;并确保您清除父容器中的浮动块。

例如，这是从您的网站的片段，我说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-14 18:04:57 sweetamylase

你说得很对。最好不要将前景图像用于设计目的，因为它们没有非技术含义。如果我是正确的图像是自然的内联元素，这就是为什么display：block在IE7中不受尊重。但是，当我需要使用前景图像时，为什么上述解决方法在IE7中不起作用？我想这是因为我使用了严格的文档类型（尚未测试）... – Hans 2013-03-15 08:52:14

@Hans我已更新我的答案以解决您的问题 – sweetamylase 2013-03-15 18:10:35

您是最棒的。谢谢你的帮助。一个相关的问题。我开始使用间隔图像进行布局，因为当使用div时，我会得到一个非常大的css文件，因为我无法在内联css中设置div宽度和高度，同时进行语义化处理。你有这个解决方案吗？ – Hans 2013-03-16 08:47:58

IE7和HTML上的显示块严格

回答

相关问题