Question

我在此页面上的浏览器（除了Firefox）中的边距有问题：

这是CSS：

#container3 {
    float: right;
    margin: 0 -240px;
    width: 100%;
}

#content3 {
    margin: 0 210px 0 -45px;
    width:500px;
}

#primary, #secondary {
    left:920px;
    overflow: hidden;
    padding-top: 40px;
    position:absolute;
    width: 220px;

}

Answer 1

我通过更改此CSS修复了Chrome中的问题：

#primary, #secondary {
left: 980px; /*was 920px*/
overflow: hidden;
padding-top: 40px;
position: absolute;
width: 220px;
}

Answer 2

有点奇怪的方式来构建页面.. 我建议你在main2中创建一个2列布局。左边是菜单，右边是评论标题，下面是内容和最近的评论div ..

然后，开始使用clearfix：http://www.positioniseverything.net/easyclearing.html

Answer 3

我看到你在#primary上使用绝对位置，这是基于窗口所以当我调整窗口大小时，“最近评论”部分会移动。因此，根据用户屏幕的分辨率和浏览器的大小，这将会移动。

添加相对于main2 div的位置。然后将#primary上的左侧值更改为右侧，值为0.这将使其保持在右侧并始终位于相同的位置。

#main2 {
  position: relative;
  ...
}

#primary, #secondary {
    right: 0;
    ...
}

编辑：这个工作的原因是当你使用position：absolute时，这个值绝对是最接近的相对父元素。如果元素没有父元素的位置：相对它将是绝对的浏览器窗口。希望这是有道理的。

如何修复这些边距？只在Firefox中正常工作

3 个答案: