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重置样式表，这会将不同的浏览器置于相同的竞争环境中。

这在填充/边距/对齐不一致方面帮助了我很多次。