初學CSS麻煩 - 頁邊距出現在IE中，但不是Chrome或FireFox

我知道它必須是我自己的錯，但我沒有看到我做錯了什麼。看起來和Chrome和FireFox完全一樣。在IE9中失敗。我使用了W3C CSS驗證器，它恢復了乾淨。初學CSS麻煩 - 頁邊距出現在IE中，但不是Chrome或FireFox

我想要的只是一些文字（水平對齊左邊，垂直對齊底部）和圖像（橫幅添加）在同一行上。

<div id="header"> 
    <span id="logo">MyCoolLogoText!</span> 
    <img id="ad1" src="banner.jpg">  
</div>

我的CSS已經變得不再像我這種掙扎，但它是目前

#logo { 
width:507px; 
height:65px; 
display:inline; 
float:left; 
text-align:left;  
vertical-align: text-bottom; 
color:white; 
margin:0; 
padding:0; 
background-color:rgb(77,00,00); 
} 

#ad1 { 
float:left; 
display:inline; 
width:468px; 
height:65px; 
margin:0; 
padding:0; 
} 
#header 
{ 
    width:975px;  
    height:75px;  
    margin:0; 
    padding:0;  
}

的Internet Explorer將放置跨度上的第一行，然後在圖像上的下一行。如果我減小了寬度，他們都會出現在第一行。我假設IE添加某種邊距或填充;但我試圖告訴它不要。

任何幫助將不勝感激。

編輯：我添加的#header

來源

2011-11-05 Rob P.

#header上有什麼風格？聽起來像容器中的填充物引起包裝。另外，display：inline和float是一種矛盾（浮動優先）;浮動使它成爲一個塊元素，這是你能夠改變寬度的唯一原因。 – mqsoh

它可以被添加margin或padding造型信息，所以請確保您有：

body { 
    margin: 0; 
    padding: 0; 
}

然而，這可能只是你的窗口的寬度。既然你是浮動的對象，並且它們有固定的寬度，那麼你可以通過簡單地縮小瀏覽器窗口寬度來獲得你在IE9中看到的與任何瀏覽器相同的效果。這就是浮動工作的本質。爲了解決這個問題，這樣做（基於關我看到你當前的保證金，填充和邊框設置什麼）：

#header { 
    min-width: 975px; /* the width of your two floated elements */ 
}

你可以使用width，而不是min-width。

編輯：好的，你有頭上的寬度。我注意到你的img標籤上的語法不正確。您有<img id="ad1" src="banner.jpg">，但它缺少結束斜槓<img id="ad1" src="banner.jpg" />。我懷疑這是問題所在，但另一方面，瀏覽器可以使用無效代碼來做有趣的事情。

來源

2011-11-05 03:23:20 ScottS

_ _是否需要自動關閉取決於文檔類型。在XHTML中，你是正確的，在純HTML中_ _是一個空元素，不需要結束斜線。 –

好點。我很習慣編碼XHTML，因此我忘記了以前的標準。 – ScottS

嘗試將＃ad1顯示爲行內塊並將其浮動到右側。如果你希望它包含foats（如果你不需要任何東西來溢出它），也可以將隱藏的溢出重新放在#header上。

來源

2011-11-05 10:02:40

初學CSS麻煩 - 頁邊距出現在IE中，但不是Chrome或FireFox

回答

相關問題