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上的顯示塊嚴格

回答

相關問題