IE7渲染CSS不正確

Question

我正在研究一個在IE7中顯示不正確的Wordpress網站。所有其他瀏覽器，包括IE8都可以。

第一個錯誤是在頂部菜單。 IE7顯示它比它應該高一些，並且懸停圖像和搜索框沒有正確對齊。

第二個是在帖子末尾顯示附加頁碼。數字框的頂部邊框被切斷。

最後也是在帖子的末尾。黃色泡泡盒中的文字被壓入盒子的底部。

http://www.archaeologyrevealed.com/another-test-post

任何想法？

Answer 1

我建議首先嚐試一個CSS reset樣式表，這會將不同的瀏覽器放在同一個遊戲區域中。

這多次幫助我填充/邊距/對齊不一致。

Answer 2

您必須添加

嵌入風格head元素中的一些IE7特定風格

<!--[if IE 7]> 
<style> 
// your styles... 
</style> 
<![endif]--> 

或鏈接到外部CSS文件

<!--[if IE 7]> 
    <link rel="stylesheet" type="text/css" media="all" href="css/ie7.css"/><![endif]--> 

對於第一個錯誤試試這個：

#s { 
    position: relative; 
    top: -5px; 
} 

可以通過添加一些邊距或填充屬性來修復其他錯誤。

編輯

創建ie7.css樣式表內把這個代碼。然後通過上面的代碼鏈接到它。它修復了您在帖子中提到的所有錯誤。

#s { 
    position: relative; 
    top: -5px; 
} 

div.pagenumbers p { 
    margin-top: 4px; 
} 

div.bubble_bottom { 
    position: relative; 
    top: 15px; 
}