Question

请查看此网站 - ＆gt; http://justicecup.radiantwebtools.com/

导航/徽标/社交媒体区域下方的部分在Firefox中相对于Chrome / Safari（所需的分隔）更远。

这个问题似乎与HTML的这一部分有关：

<div class="header-container">...</div> <!--- Okay... --->
<div class="row content"> <!--- DevTools shows this the right underneath the header area...okay, thats correct --->
    <div class="width-container">...</div> <!--- on Chrome/Safari it's good.  On Firefox, this is pushed down further....why? --->
</div>

我试过给标题区域一些css来对付它，但无济于事

.header-container { overflow:none;}

此屏幕截图也显示了差异 - ＆gt; http://screencast.com/t/CrF9HEaki

感谢您的帮助。

Answer 1

我认为这个问题可能与collapsing margins有关。

该问题的一个解决方法是更改以下两个规则：

#template .content .story-primary {
    margin-top: 28px;
}
#template .content .story {
    margin-top: 62px;
}

为：

#template .content .story-primary {
    padding-top: 28px;
}
#template .content .story {
    padding-top: 62px;
}

Answer 2

您的页面布局非常复杂，我认为您的部分问题源于在两个不合适的地方使用.width-container。我一直在使用浏览器的inspect元素来摆弄css，但是当我将样式改为一个时，它会逐渐变为另一个。我认为重新设计您的页面会很有帮助。我建议将整个页面内容（不包括背景）包含在div中，并将宽度容器样式应用于该内容。

<div id="body">
    <div class="width-container">
        <div id="templatewrapper"> ... </div>
        <div id="templatefooter"> ... </div>
    </div>
</div>

接下来，你应该将标题内容的宽度容器重命名为更合适的东西。

<div id="page-header">
    <div class="logo"> ... </div>
    <div class="rwtmodule navigation-module meganav"> ... </div>
    <div class="social-media"> ... </div>
</div>

执行此操作后，您应将徽标，导航和社交媒体上的float:left;替换为display:inline-block并删除各种margin。然后将padding或margin应用于#page-header以将其推倒。 .logo和.social media位置错误，但您可以使用position:relative和top:/*some value*/进行更正。

执行此操作后，该网站应该与firefox和chrome中的当前firefox版本一样。然后，您可以像使用徽标和社交媒体一样使用相对定位来移动页面主体。

请记住先在安全的地方进行测试！

希望这有帮助。

在Firefox中推送div

2 个答案: