帮助，IE7抢劫了我的divs，现在他们正在屏幕上跑！

Question

我的网站http://hivechatter.com/对于Firefox，Chrome，IE8来说非常性感，你可以这么说：

然后随之而来的是IE7，它将她的div很糟糕，以至于他们几乎跑掉了屏幕！无论出于何种原因，div中的内容都集中在一起。到底发生了什么事？这似乎与IE7解释左边的方式有关：百分比边距，但我无法弄明白。

为了方便和后人的缘故，下面是我的CSS的相关部分，删除了文本格式和其他废话。 #container是整个页面容器，＃blue_box是主要内容框，＃left和#right是蓝色框中的列，＃diviv是分隔它们的白线，＃links是在#blue_box下面悬停的浅蓝色导航

#background {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: no-repeat #222933;
    overflow: hidden;
}    

#container {
    position: relative;
    left: 34%;
    top: 10%;
    width: 50%;
    min-width: 450px;
    max-width: 700px;
    overflow: auto;
    padding: 0;
}

#blue_box {
    position: relative; /* so that divider has appropriate height */
    width: 94%;
    padding: 3%;
    overflow: auto; /*needed so that div stretches with child divs*/
}

#left {
    position: relative;
    float: left;
    width: 44%;
    margin: 0;
    padding: 0;
}

#right {
    position: relative;
    float: right;
    width: 49%;
    margin: 0;
    padding: 0;
}     

#divider{
    position:absolute;
    left:49%;
    top:6%;
    bottom:6%;
    border-left:1px solid white;
}

#links {
    float: right;
    width: 16em;
    overflow: auto;
}

Answer 1

将容器CSS的相对位置更改为绝对值。

你的问题是你的形象就在那里，容器跟着它相对定位。

Answer 2

IE7使您的容器居中，因为您已将您的身体设置为text-align:center，然后您正在设置容器left:34%。 IE只是出于某种原因将它们加在一起。这可能就是为什么你的东西在IE中居中。您可以为IE7执行条件样式表并删除text-align。

Answer 3

目前无法测试是否可以解决问题，但在蓝框上使用边距来定位而不是位置：相对通常会使古代Internet Explorer的黑暗世界中的事情变得容易多了。