1

我正在尝试使用 Zen Grids 来避免像我一样花费数小时与我的布局作斗争。除了简单之外，我希望从中获得的主要优势是避免了大多数浏览器中的复合子像素舍入问题（通过浮动和负边距来定位元素而不是依赖于前面的列）。

但是，在 IE7 中，我无法让布局正常运行。我有 IE7 旧版支持，并且 boxsizing.htc 工作正常。我制作的测试页由页眉、两个侧边栏、一个内容区域和一个页脚组成。当像 Zen Grids 那样使用浮动和负边距定位元素时，我最终会将所有元素堆叠在同一个物理空间中，如下所示。使用 Zen Grids 会产生完全相同的行为。这只发生在 IE7 上（我不关心 IE6）。

我尝试在不同的元素上设置 haslayout 没有成功，我找不到相同问题的示例来挽救我的生命。

布局折叠屏幕截图。

我在这里设置了一个 jsfiddle 示例： jsfiddle

这是html：

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/style.css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="container">
        <div class="header">
            <h2>Header</h2>
        </div>
        <div class="sideOne">
            <h2>Sidebar 1</h2>
        </div>
        <div class="content">
            <h2>Page Content</h2>
        </div>
        <div class="sideTwo">
            <h2>Sidebar 2</h2>
        </div>
        <div class="footer">
            <h2>Footer</h2>
        </div>
    </div>

</body>
</html>

和CSS：

.container {
    position: relative; /* Checked to see if haslayout was the issue */
    zoom: 1;
    width: 1000px;
    background: silver;
}
.header {
    float: left;
    margin-left: 0;
    margin-right: -100%;
    width: 100%;
    height: 60px; /* For visibility */
    background: green;
}
.sideOne {
    float: left;
    clear: left;
    margin-left: 0;
    margin-right: -25%;
    width: 25%;
    height: 40px; /* For visibility */
    background: purple;
}
.content {
    float: left;
    margin-left: 25%;
    margin-right: -75%;
    width: 50%;
    height: 40px; /* For visibility */
    background: orange;
}
4

0 回答 0