由於您使用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/
你說得很對。最好不要將前景圖像用於設計目的,因爲它們沒有非技術含義。如果我是正確的圖像是自然的內聯元素,這就是爲什麼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