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; 
}