div 网格在 IE7 中显示不正确
编辑：我没有注意到我已经为 .slot 设置了固定的宽度和高度 - 最初是 33.3333%。但 IE7 仅以这个固定大小“正确”地呈现它（此页面以 600 x 600 的 iframe 形式）
我正在尝试创建一种带有 div 的网格来填充整个页面。经过 2 天的谷歌搜索 IE 7 的战斗，我终于来到了......
所以基本思想是具有外部边框和单元格之间固定间距的 3x3 网格。对于此示例，垂直间距为 2 像素，水平间距为 1 像素。网格正在填充页面。
样式是：
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 正确渲染它？
EDIT: I didn't notice that I've put fixed width and height for .slot - it was 33.3333% initially. But IE7 rendered it "correctly" only with this fixed size (this page is iframed in a 600 x 600)
I'm trying to create sort of grid with divs that would fill whole page. After 2 days of googling an fighting IE 7 I'm finally here...
So the basic idea is 3x3 grid with external border and fixed spacing between cells. For this example vertical spacing is 2px and horizontal is 1px. Grid is filling the page.
Styles are:
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;
}
And here's the markup:
<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>
Is there a way to make IE7 render it correctly?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
试试这个：将 css 属性
display:block添加到.block类中。您还需要修复#rootdiv 的宽度，因为如果宽度未修复，网格会扩展至可用宽度。try this: add the css property
display:blockto the.blockclass. you need to fix the width of the#rootdiv also because if the width is not fix the grid spread upto the available width.