1

请查看此网站 --> 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;}

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

谢谢你的帮助。

4

2 回答 2

2

我认为这个问题可能与利润率下降有关。

解决此问题的一种方法是更改​​以下两条规则：

#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;
}
于 2013-07-13T14:37:47.850 回答
0

您的页面布局非常复杂，我认为您的部分问题源于.width-container在两个不合适的地方使用。我一直在使用浏览器的检查元素摆弄 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的 s 替换为并摆脱各种margins。然后应用paddingormargin将#page-header它们向下推。.logoand将.social media在错误的位置，但您可以使用position:relativeandtop:/*some value*/来纠正它。

完成此操作后，该站点在 Firefox 和 chrome 中应该看起来像当前的 Firefox 版本。然后，您可以像使用徽标和社交媒体一样使用相对定位将页面的主体向上移动。

请记住首先在安全的位置进行测试！

希望这可以帮助。

于 2013-07-13T14:36:57.253 回答