IE7：菜單上方標題

我遇到了IE7問題。我有一個標題，這是一個IMG。在它下面，我有一個代表菜單的div，它們必須連接到彼此之間，沒有空間。兩者都是1000px寬度。在Opera和FireFox中，標題和菜單整齊地連接在一起。但是，在IE7中，菜單DIV和IMG之間有一個小空間。我試圖明確定義IMG上的填充和邊距，但它不起作用。我以前有過這個問題，所以它似乎是一個IE7的怪癖。IE7：菜單上方標題

我的HTML代碼：

<div id="middle"> 
    <img id="ctl00_headerHolder_headerImage" 
     src="pictures/headers/header_home.jpg" style="border-width:0px;" /> 

    <div id="ctl00_menuPanel" class="menu"> 
     <a id="ctl00_home" href="Default.aspx" style="color:#FFCC33;">Home</a> 
     | 
     <a id="ctl00_leden" href="Leden.aspx">Leden</a> 
     | 
     <a id="ctl00_agenda" href="Agenda.aspx">Agenda</a> 
     | 
     <a id="ctl00_fotos" href="Fotos.aspx">Foto's</a> 
     | 
     <a id="ctl00_geschiedenis" href="Geschiedenis.aspx">Geschiedenis</a> 
     | 
     <a id="ctl00_gastenboek" href="Gastenboek.aspx">Gastenboek</a> 
    </div> 
</div>

來源

2008-08-17 IceHeat

嘗試IE開發工具欄，可以讓你檢查正在發生的事情與元素，給你列出涉及的領域。它可能會讓你更好地理解問題。

來源

2008-08-17 19:12:09

解決辦法：

img { 
padding: 0px; 
margin: 0px; 
display: block; 
}

顯示：塊

來源

2008-08-17 19:12:51 IceHeat

我碰上這個有很多。而不是追查具體的行爲，嘗試明智的檢查通過設置img/div/etc選擇器的填充和邊距屬性爲0，設置border-style：none border-width：0px border =「0」等。

IE開發工具欄是必備的，但它是否可以幫助您找出單像素問題是不太可能的。

來源

2008-08-17 19:16:03

而不是訴諸顯示塊，請注意，IE7做一些嚴重的奇怪的事情與空白;嘗試刪除圖像和div之間的空白，並看看會發生什麼。

來源

2008-08-17 19:23:49 eplawless

CSS復位（如YUI Reset CSS）對於這類事情非常有用。他們重置了大量HTML元素的填充，邊距和其他顯示屬性，以最大限度地減少顯示差異。

來源

2008-08-17 19:25:43

的解決方案...顯示：塊

這個問題不能正確回答不知道的渲染模式，瀏覽器是;如果你有CSS渲染問題，你需要告訴人們你有什麼文檔類型。您提到的圖像行爲在怪異模式下與標準模式不同。最小的測試用例必須包含完整的HTML文檔和CSS來重現問題。請不要問別人幫忙而不給他們，他們需要不浪費他們的時間很容易回答的信息...

來源

2008-08-17 20:20:50 Polsonby

真正的解決方案：

#middle { font-size: 0; line-height: 0; }

來源

2008-08-18 04:28:37 Akira

IE7：菜單上方標題

回答

相關問題