Question

编辑：我没有注意到我为.slot设置了固定的宽度和高度 - 最初为33.3333％。但是IE7只有这个固定的大小才能“正确”呈现它（这个页面的格式为600 x 600）

我正在尝试用div填充整个页面来创建一种网格。经过2天谷歌搜索IE 7后，我终于来了......

所以基本思路是3x3网格，外部边框和单元格之间固定的间距。对于此示例，垂直间距为2px，水平为1px。网格正在填充页面。

样式是：

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

#root {
    height          : auto;
    display         : block;
    position        : absolute;
    bottom          : 0;
    top             : 0;
    left            : 0;
    right           : 0;    
    border          : 3px solid #000000;
    padding         : 2px 0px 0px 1px;
}

.slot {
    position        : relative;
    float           : left;
    padding         : 0;
    margin          : 0;
    width           : 33.3333%;
    height          : 33.3333%;
}

.block {
    height          : auto;
    display         : block;
    position        : absolute;
    bottom          : 0;
    top             : 0;
    left            : 0;
    right           : 0;    
    margin-right    : 1px;
    margin-bottom   : 2px;
    border          : 2px solid black;
}

这是标记：

<body>
    <div id="root">
        <div class="slot">
            <div class="block">
                <p>Some text</p>
            </div>
        </div>

        ... 8 more times .slot div

        <div style="clear: both;"></div>
    </div>
</body>

有没有办法让IE7正确渲染？

Answer 1

试试这个：将css属性display:block添加到.block类。你需要修复#root div的宽度，因为如果宽度没有固定，网格会扩展到可用的宽度。

在IE7中divs网格显示不正确

1 个答案: