编辑:我没有注意到我已经为 .slot 设置了固定的宽度和高度 - 最初是 33.3333%。但是 IE7 仅使用此固定大小“正确”呈现它(此页面的 iframed 为 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 正确渲染它？
最佳答案
试试这个:将 css 属性 display:block 添加到 .block 类。您还需要修复 #root div 的宽度，因为如果宽度未修复，网格会扩展到可用宽度。
关于html - div 网格在 IE7 中显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7777844/