Question

我的朋友帮我为我的网站制作了一个新的设计，但后来得到了一份全职工作。网页设计不是我的强项，我无法在所有浏览器中使用它！

现在，我的网站在Chrome和Safari中看起来很不错。但在FireFox中被打破了 http://dl.dropbox.com/u/22866203/sb%202/speedbump.html http://dl.dropbox.com/u/22866203/sb%202/speedbump.css

我正在研究/尝试不同的CSS重置来解决这个问题（Meyers重置），但这似乎只打破了Chrome和Safari中的页面。

任何建议都会非常感谢！

Answer 1

如果你没有重置就开始了，那么重置就无济于事了。你特别的问题是你没有清理浮子。要解决这个问题：

#social-media, hr { clear: both; }

顺便说一句，你在图像上有404错误和许多其他警告。检查萤火虫或devtools。

Answer 2

当我使用firebug对您的网站进行一些混乱时，我注意到如果您向某些div添加属性float: left，它会将网站排列为与Chrome相同的内容。
下载FireBug for firefox（很棒的工具）并按照你想要的方式安排浮动div。

希望它有所帮助。

Answer 3

enter image description here

给#wrapper溢出：隐藏并从之前和之后删除边缘顶部。

Answer 4

问题在于您在正文文本（左侧）和绿色框（右侧）中浮动了元素，但父级未浮动，这意味着浮动元素不会影响它的整体高度。另外，请勿使用hr，而是使用边框。

路径现在相对于我的文件夹，您需要将其更改回来。

Answer 5

ID 需要是唯一的（#wrapper）我从上图中看到它的四（4）个实例。

请使用类，因为它可以重复使用。

.wrapper:after{
    visibility: hidden;
    height:0;
    display: block;
    clear:both;
    *zoom:1;
    content: '.';
}