网站在IE7中无法正确呈现？

Question

我的网站：geek.designbracket.com（Drupal 6.10）未在IE7中正确呈现。主要问题在于标题和徽标中的主要链接。 该网站会根据需要在FireFox和Chrome中显示。

主要问题：#Page div在IE的顶部和底部有巨大的余量，取代了Logo。

基本上我使用了div：  #utilities封装了主菜单+搜索+徽标，它们相对位于此div内。我这样做是为了确保FF和Chrome中元素的一致对齐，即使在不同分辨率下查看网站时也是如此。

在这个div下面我有#Page div：它包含侧边栏和内容。

相关div的css fr如下：

#utilities {
margin:0 auto;
padding:0 10px 15px;
width:990px;
}

#utilities #plinks { /*plinks is for the primary menu*/
float:left;
left:60px;
position:relative;
width:900px;
}

#utilities form { /* this div determines the position of the search box */
position:relative;
top:10px;
z-index:1;
}


#logo {
float:left;
left:70px;
position:relative;
}

请帮助我将主要链接，徽标和搜索框对齐，使得对齐在IE中的不同分辨率保持一致，就像在FF中完成一样。

感谢。

Answer 1

快速建议：尝试在#logo块中放置一个clear：left语句（现在不能自己测试......）

Answer 2

以下是ie6的一些修复。它应该解决一些ie7问题

徽标位于最右侧。

style.css #logo{clear:left;}

您的左栏有double-margin bug

layout.css #primary {display:inline;}

您的“添加新评论”和“阅读更多”已被切断。问题是它们都是浮动元素，没有高度。然后，您在不同的元素上放置了大量的边距/填充，以使其排列正确，这通常不能很好地跨浏览器。我想你需要阅读Clearing Floats并从头开始这一部分。

Answer 3

稍微加油，但是下次IE让你拿到锤子时，你可能会发现positioniseverything很有用！