Question

我正在尝试使用Zen Grids来避免花费数小时与我的布局进行战斗。除了简单之外，我想要的主要优点是避免在大多数浏览器中复合子像素舍入问题（通过浮点数和负边距提供以定位元素而不是依赖于前面的列）。

然而，在IE7中我无法让布局表现出来。我有IE7遗留支持和boxsizing.htc正常工作。我制作的测试页面包括一个标题，两个侧栏，一个内容区域和一个页脚。当Zen Grids使用浮点和负边距定位元素时，我最终将所有元素堆叠在同一物理空间中，如下所示。使用Zen Grids会产生完全相同的行为。这只发生在IE7上（我不关心IE6）。

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

Layout collapse screenshot.

我在这里设置了一个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;
}

IE7 - 浮动布局div堆叠在彼此之上，具有负相反边距

0 个答案: