Question

我在IE7中有一个奇怪的布局问题。基本上发生的是，它不是将内容对齐到左上角，而是应该在哪里，而是与中间的某个位置对齐。

似乎一切都正确显示，但main-bank-container是一个不合适的元素。我真的不想绝对定位这个，因为这意味着我必须用jQuery来保持包含div的高度而不是隐含。

我已设置jsFiddle here来帮助。

以下是代码：

HTML

<div style="padding: 4px;" class="nopad" id="maincontent">
    <div id="summary-page-container">
        <div id="main-bank-container">
            <div id="bank1" class="bank-container">
                <div class="basicview">
                </div>
            </div>
            <div id="bank2" class="bank-container">
                <div class="basicview">
                </div>
            </div>
            <div id="bank3" class="bank-container">
                <div class="basicview">
                </div>
            </div>
            <div id="bank4" class="bank-container">
                <div class="basicview">
                </div>
            </div>
        </div>
        <div style="clear: both;">
        </div>
    </div>
</div>

CSS

#maincontent {
    overflow: hidden;
    text-align: center;
}
#summary-page-container {
    overflow: hidden;
    position: relative;
    width: 1400px;
}
#main-bank-container {
    width: 690px;
}
.bank-container, .bank-container-small {
    border: 1px solid #CFCFCF;
    border-radius: 5px 5px 5px 5px;
    color: #555555;
    height: 90px;
    margin: 10px;
    position: relative;
    text-align: left;
    text-shadow: 0 1px 1px #FFFFFF;
    width: 670px;
}
.basicview {
    background:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ebebeb));
    background:-moz-linear-gradient(top,#ffffff,#ebebeb);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ebebeb')"; /* IE8 */
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ebebeb'); /* IE6 & IE7 */

    border-radius: 5px 5px 5px 5px;
    height: 90px;
    width: 100%;
}

哦，如果这里重要的是mydoctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

Answer 1

从text-align: center;

中删除#maincontent

My Fiddle

Answer 2

#main-bank-container {
    width: 690px;
    float:left;
}

Answer 3

我可以看到的两个问题是#main-bank-container的宽度为690px，而摘要页面容器的宽度为1400px。

如果你删除了#maincontent div上的文本对齐中心声明，那么在IE9标准中使用IE7标准的小提琴也会看到它的位置。

IE7定位问题

3 个答案: