Question

我有两个向左浮动的元素。一个是身体的第一个孩子，另一个是容器的第一个孩子，是身体的第二个孩子。

...
<body>
    <div class='child'>
    </div>
    <div class='container'>
        <div class='child'></div>
    </div>
</body>
...

容器具有固定宽度，并使用'margin：0 auto;'居中。目的是让容器儿童保持向左，但在窗户较小时容纳身体儿童。

小提琴在这里：

http://jsfiddle.net/mrSav/7/

此解决方案在Chrome中运行良好;你会注意到，当你把窗户做得更小时，容器孩子会愉快地为身体孩子移动。

然而，在Firefox中，当您使窗口变小时，容器子项与正文子项重叠。

对于这两个孩子，我添加了一个悬停状态，有效地“戳DOM”并强制Firefox重新流动页面。当您将鼠标悬停在子项上时，页面会自行更正并且子项将捕捉到“正确”位置。

这是一个错误吗？有解决办法吗？

Answer 1

更新 - 容器确实在正文的第一个孩子下流动仍在使用媒体查询，但更改了一些内容以允许容器子项相对于窗口而不是父项的绝对定位： DEMO

从容器中删除position: relative。将两个child divs css分开并更改容器子上的几个样式，如下所示：

.child {
    width: 100px;
    height: 200px;
    background-color: white;
    border: 2px dashed black;
    margin: 0px;
}

body > .child {
    float: left;
    z-index: 1;
}

.container > .child {
    position: absolute; //relative to window since parent has no position
    left: 100px;
}

然后使用700px以上的媒体查询将位置更改为相对位置并将其更改为自动：

@media screen and (min-width: 700px) {
    .container > .child {
        position: relative; //override absolute position
        left: auto; //override left: 100px
    }
}

ORIGINAL - 容器不会在身体的第一个孩子下面流动。 我不知道造成这种情况的原因（我猜它是由Firefox不同处理的一个浮动项目），但这是一个使用媒体查询的工作： DEMO

使用固定宽度，您可以执行以下操作：

.container { //use margin-left: 100px until the total width of the window is 700px (500px + 100px + 100px = container width + 100px on either side )
    margin: 0 0 0 100px;
}

@media screen and (min-width: 700px) { //700px to account for 100px of left div (.container is centered at this size)
    .container {
        margin: 0 auto;
        float: none;
    }
}

我还会添加* {box-sizing: border-box;}（带有适当的前缀，-moz-， - webkit-）来计算任何边框/填充。

Firefox浮动元素需要DOM戳

1 个答案: