0

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

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

我在这里设置了一个jsFiddle 来提供帮助。

这是代码：

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">
4

3 回答 3

2

text-align: center;从中删除#maincontent

我的小提琴

于 2012-07-23T09:23:17.373 回答
0 
#main-bank-container {
    width: 690px;
    float:left;
}
于 2012-07-23T09:22:43.380 回答
0

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

如果你删除#maincontent div上的文本对齐中心声明，它也会在IE7标准中查看IE9中的小提琴，它将整理定位。

于 2012-07-23T09:32:25.880 回答