如何解决 Chrome 和 Firefox 中编程的主要边距问题？

发布于 2024-11-20 00:10:47 字数 1020 浏览 2 评论 0原文

在搜索了几乎所有地方并验证了我的代码几次（并修复了错误）之后，我不知道该怎么做。我开始在 Firefox 中编写这个布局，一切看起来都很完美，然后去检查 Chrome 并确保它没问题，但你瞧，Chrome 把它搞砸了。

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

我写下了页脚边距的代码差异，它们大得愚蠢。以下是原始 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 网站，所以有点长。因此，如果您需要查看其他内容，请询问，我会发布。

谢谢梅根

原文

After searching just about everywhere and validating my code a few times (and fixing the mistakes) I am at a loss as to what to do. I started programming this layout in firefox and everything looked perfect then went to check out Chrome and make sure it was ok and low and behold, Chrome screwed it up.

The site is here: http://semperfiwebdesign.com/slipstick/ The problem is with the margins on the footer and footer_top classes.

And I wrote down the code differences for the footer margins and they are stupidly big. Below is the CSS of the original:

.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;

}

They run in the order they appear with the footer. So footer_top is the box with the top and bottom border, footer links is the paragraph of non working links and finally #text-14 is the "ad" image below the links. I apologize for the weird class names but wordpress gave me a lot of them.

Now seeing that above here is what I figured out using firebug in Chrome to what Chrome wants the fix to be:

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

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

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

Obviously this is a little absurd and I can't place these numbers into the real style sheet without truly messing up the entire layout.

I have literally searched just about everywhere and I'm at my wits end. I have no idea where to go with this. I would post the entire CSS but since it's wordpress site it's a little long. So if you need to see anything else please ask and I will post it.

Thank You
Megan

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落花浅忆 2024-11-27 00:10:48

设置#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 的所有引用

希望这有帮助

set #container -> position: relative;

#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;
}

and remove all references to #primary in 3c-c-fixed.css

Hope this helps

回复收藏 0 原文

~没有更多了~