如何修复 Chrome 和 Firefox 中的主要边距问题编程？答案

【问题标题】：How do I fix a major margin issue programming in Chrome and Firefox?如何修复 Chrome 和 Firefox 中的主要边距问题编程？
【发布时间】：2011-10-04 13:40:57
【问题描述】：

在几乎到处搜索并验证了我的代码几次（并修复了错误）之后，我不知道该怎么做。我开始在 Firefox 中对这个布局进行编程，一切看起来都很完美，然后去检查 Chrome 并确保它正常且低，瞧，Chrome 搞砸了。

该站点在这里：http://semperfiwebdesign.com/slipstick/ 问题在于页脚和页脚顶部类的边距。

我写下了页脚边距的代码差异，它们非常大。下面是原文的CSS：

.footer_top {
float: right;
margin-right: -26px;
margin-top: 69px;}

.footerlinks {
float: right;
margin-right: 120px; }

#text-14 { 
float: right;
margin-right: -25px;
text-align: center;
margin-top: -69px;

}

它们按照与页脚一起出现的顺序运行。所以 footer_top 是带有顶部和底部边框的框，页脚链接是非工作链接的段落，最后 #text-14 是链接下方的“广告”图像。我为奇怪的类名道歉，但 wordpress 给了我很多。

现在看到上面是我在 Chrome 中使用 firebug 发现的 Chrome 希望修复的内容：

#text-14 {
margin-top: -190px; }

.footerlinks {
margin-top: -279px; }

.footer_top { 
 margin-top: -422px;}

显然这有点荒谬，我不能将这些数字放入真正的样式表中，否则会真正弄乱整个布局。

我几乎到处搜索过，但我束手无策。我不知道该去哪里。我会发布整个 CSS，但由于它是 wordpress 网站，所以它有点长。因此，如果您需要查看其他内容，请询问，我会发布。

谢谢梅根

【问题讨论】：

尝试添加 clear:both;到页脚？
我刚刚尝试过，但没有成功。我确实返回并为 Firefox 添加了右边距，因此页脚在那里看起来“还可以”，但在 chrome 中却很糟糕。感谢您尝试提供帮助。

标签： css firefox google-chrome margin

【解决方案1】：

设置#container -> 位置：相对；

#primary {
    background-color: #002E5B;
    color: white;
    /*float: left;*/
    height: 100%;
    left: 0;
    /*margin-left: -685px;
    margin-top: -30px;
    min-height: 2500px;*/
    position: absolute;
    top: 0px;
    width: 168px;
}

并删除 3c-c-fixed.css 中对#primary 的所有引用

希望对你有帮助

【讨论】：