IE 7/8 CSS的div大小問題與img背景

我正在設計一個乾淨的風格，以在一些網絡應用程序中使用。我遇到了一個IE bug（總是一樣）。IE 7/8 CSS的div大小問題與img背景

好吧，它很簡單。我有一個漸變背景，在它的頂部有一個沒有邊框的長方形，它沒有任何東西，周圍有一個陰影，給出了它在背景上的錯覺，正如你在snapshot中看到的那樣。

它在除IE以外的所有瀏覽器中都很好地顯示。 IE顯示如this。

IE增加了大約4 px到頂級div與類「內容頂部陰影」。它不應該。我已經使用邊距和填充0來修復它，沒有運氣。

PS：png的透明度。

任何想法我該如何解決這個錯誤，或什麼是錯的CSS？

謝謝。

下面是代碼：

HTML

<div class="content-holder"> 
     <div class="content-center"> 
      <div class="content-top-shadow"></div> 
      <div class="content-center-holder"></div> 
      <div class="content-bottom-shadow"></div> 
     </div> 
    </div>

CSS

.content-holder { 
    width: 100%; 
    height: 570px; /*once complete change to auto*/ 
    background-image: url(images/content-holder-bg.png); 
    background-repeat: repeat-x; 
    padding-top: 20px; 
    text-align: center; /*IE Bug Fix to Center the other divs inside this one*/ 
} 
.content-center { 
    width: 918px; 
    height: auto; 
    margin-left: auto; 
    margin-right: auto; 
} 
.content-top-shadow { 
    width: 918px; 
    height: 9px; 
    background-image: url(images/content-top-shadow-bg.png); 
    background-repeat: no-repeat; 
} 
.content-center-holder { 
    width: 918px; 
    height: 200px; /*once complete change to auto*/ 
    background-image: url(images/content-center-holder-bg.png); 
    background-repeat: repeat-y; 
} 
.content-bottom-shadow { 
    width: 918px; 
    height: 9px; 
    background-image: url(images/content-bottom-shadow-bg.png); 
    background-repeat: no-repeat; 
}

來源

2009-12-12 Fábio Antunes

IE認爲你的DIV應該是因爲文本尺寸比9px大，即使沒有文本（！），所以你需要選擇t

font-size:1px;

或類似的東西，在頂部和底部的divs。

來源

2009-12-12 18:04:20

你的權利工作。奇怪底部div沒有這個問題。一旦它應該有。 – 2009-12-12 18:06:40

底部div有這個問題，你只是沒有看到它，因爲它的背景img是頂部對齊的，並且差距低於它。 ;） – 2009-12-12 18:09:05

你說得對。我選擇了div及其大於9px。我沒有注意到。 – 2009-12-12 18:11:17

這裏的東西可以幫助我克服跨瀏覽器不兼容的問題，特別是在DIV和TD中的空白空間。將其作爲空白空間的唯一內容，同時確保您的spacer.gif圖像是1px x 1px透明點。乾杯!

 
<div style="width:1px;height:1px;visibility:hidden;overflow:hidden;clip:rect(1px,1px,1px,1px);color:#FFFFFF;font-size:1px;"><img src="/images/spacer.gif"></div>

來源

2009-12-18 02:38:12 DoctorLouie

幸運的是，我還沒有這個問題，但會派上用場。謝謝。 – 2009-12-18 12:20:47

IE 7/8 CSS的div大小問題與img背景

回答

相關問題