IE7渲染CSS不正确

Question

我正在开发一个在IE7中表现不佳的Wordpress网站。所有其他浏览器，包括IE8都可以。

第一个错误出现在顶部菜单中。 IE7显示它应该比它应该更高，并且悬停图像和搜索框没有正确对齐。

第二个是帖子的末尾，其中显示了其他页码。数字框的顶部边框正在被切断。

最后也是在帖子的最后。黄色气泡盒中的文字被压入盒子的底部。

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

有什么想法吗？

Answer 1

您必须添加一些IE7特定样式

在HEAD元素中嵌入样式

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

Answer 2

我建议首先尝试CSS reset样式表，这会将不同的浏览器放在同一个游戏区域。

这对填充/边距/对齐不一致有很多帮助。