Chrome中的边距重叠答案

【问题标题】：margin overlapping in ChromeChrome中的边距重叠
【发布时间】：2011-10-02 12:08:14
【问题描述】：

我在一个网站上工作，我有一些 css 问题。它在 FF 上看起来不错，但在 Chrome 上有点奇怪。请帮我解决这个问题。

http://thesunkissedgirls.com.au/

这是主页，如果您向下滚动页面，您会看到 3 个段落，它们在 ff 中看起来不错，但是当您签入 chorme 时，标题行与第一段混合在一起。

请帮我解决

<div style="color: white;font-size: 14px;margin: 0 0 30px 0;padding: 0;position: absolute;text-align: left;top: 780px;width: 960px; display:block;">
     Promotional Models | Photographic Models | Bikini Models | Lingerie Models | Model Competitions| Sporting Events | Dancer’s | Cheerleaders | Card Girls | Grid Girls |Poker Nights | Promo Girls | Karaoke + more
</div>

而段落css是

#xtra-paragraph {
    color: #DBDBDB;
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 60px;
    margin-top: 35px;
    display: block;
}

#xtra-paragraph p {
    text-align: left;
}

【问题讨论】：

它在 FF 中也被破坏了，仅供参考 - 请注意这不是 SFW ;)
你会在段落周围放置 div 吗？
@Alien 那些女孩来自我住的地方，阳光海岸 :)

标签： html css margin

【解决方案1】：

到 div 类 .social 删除 float:left，

对于包含

的div

促销模型 |摄影模特 |比基尼模特 |内衣型号 |模特大赛|体育赛事 |舞者 |啦啦队 |卡片女孩 |网格女孩 |扑克之夜 |促销女孩 |卡拉OK +更多

添加float:left。

最后，将margin-top 增加为#xtra-paragraph

更新：

使用 Yslow！我测试了您网站的速度。你的整体表现得分 65。那很慢。我建议你优化你的网站，主题代码很草率。

【讨论】：

我的错误我一定是指另一个 div。现在好像还好

【解决方案2】：

在您的 div 样式中，更改“top: 780px;”到“顶部：770px；”帮我修好了。

【讨论】：

【解决方案3】：

它在FF中也被破坏了。包含所有内联 CSS 的 div，将 top:780px; 更改为 top:760px;

【讨论】：

【解决方案4】：

您将它绝对定位在那里，因此如果它被静态定位，浏览器将无法为其分配空间。

你需要放更多的空间...

#xtra-paragraph {
   margin-top: 50px;
}

...或将 HTML 放在应符合逻辑的位置，并默认将其定位为 static。

【讨论】：

我正在修复 wordpress 主题，它的设计非常混乱。所以请帮助我如何摆脱这个
@Muzammil 你这样做的方式是 hacky。但是，我给出的答案确实有效（只要那个白色文本的高度是一致的）。