头痛的css（div）布局

我所用的主题fstos在制作和测试阶段都用的ie6，因为是参照wordpress自带的几个主题写的，当时没有考虑css的兼容性问题，犯了“大跃进”错误（用firefox浏览简直是惨不忍睹），但由于工作很忙也没有时间修理它。这两天抽了些时间好好对他来了个大清理，出顺便将我遇到的主要问题总结一下，希望对大家有所帮助。
　　问题现象：ie中显示正常，firefox中却支离破碎。可大致总结为：有的本来居中的没有居中；本来在最下面的跑到上面来了；本来在一侧的结果到了别处；有的在100px处，可看起来像在105px（举例而已）处；同在一个父层中的两个子层，一个内容多些从高度上来说自然拉伸，但另一个子层却不跟着拉伸；一串英文过长超出了原设定的边界。接下来一个一个说：
　　1、本来居中的没有居中
　　在ie中显示是居中的（只需要设置body的text-align:center;不知道为什么感觉这样设置很奇怪。），在firefox中显示是靠左的即没有居中，重新检查了下发现需要设置margin来使相应对象居中：margin:0 auto;　设置的值的含义我就不说了。
　　2、本来在最下面的跑到上面来了
　　我采用的是footer单独一个行的布局，也就是说，在footer的左右是没有其他层的。在ie中显示为最下面（css同样也没有特别设置），在firefox中显示跑的上面来了，这个问题是因为没有设置clear，需要设置为clear:both; 即不允许该层两边有浮动对象。
　　3、本来在一侧的结果到了别处
　　在ie中sidebar显示在正常的页面中部的右侧（我的布局分为上中下三部分，上下分别为header和footer，中部为帖子列表和sidebar，sidebar在中部的右侧），在firefox中sidebar跑到了中部的下面，footer的上面。
　　起初我认为可能是sidebar设置为float:right;的缘故排除后，我将sidebar的float设置去掉，转而通过设置margin来使sidebar显示在中部的右侧，但它还是顽固的待在下面，最后通过反复的检查发现之前我在sidebar的一个ul样式中有一个clear:both;的设置，将它去掉后sidebar在firefox中回到上面了，但在ie中还是在下面（检查发现是因为刚才调试的时候将margin的值设置的太大了，firefox显示为继续的右移，而在ie中就转到下一排了，修改margin值后没有这个问题了）。
　　但是这样却发现ie中和firefox中有几个象素的差别，在ie设置为合适的位置，可在firefox中就靠左了些。这个问题我没有分析清楚，暂时认为是浏览器间的处理不同吧。最后我还原sidebar的float设置为right，这时两个浏览器间的显示出入问题就解决了。
　　4、同一父层下的两个子层不能同时拉伸
　　这个问题表现为总局的中间部分，左侧的内容多了就会继续向下拉伸显示，但是父层没有跟着一起拉伸，这样就会出现左侧部分的背景色为白色（举例），而父层没有跟着拉伸的部分背景色为body的背景色。这种情况当然是不能接受的。这个在ie中没有出现的（这是因为ie自动设置父层拉伸），但在firefox中会出现。
　　解决这个问题的方法是在中部下面再加一个层并设置其样式：clear:both;　。这样可以达到强制父层拉伸的效果。
　　5、一串英文过长超出了原设定的边界
　　这个问题在ie中出现，同样的应该和ie的自动拉伸的机制有关（看来这个机制是有利也不弊呀）－－当一个英文字串如一个注册表的地址一般都会很长（中间没有空格），ie就“自作主张”的将其拉伸了，使得它所在的层被拉宽了，这样就把sidebar给挤到下面了。
　　这个问题需要大家注意下，在遇到这种字串时可以加个空格或直接在必要的地方换个行。

　　好了，以上就是这次修理布局的一些体会，大家有时间应该看看相关方面的书，推荐《CSS Cookbook中文版》，再链几个网文（在写这篇文章时才想起静下心来找些资料看看，希望你不是我这种情况）：
　　IE与Firefox下对CSS解析的区别：http://www.iplinger.com/archives/184
　　ff.hk下的几篇介绍区别的文章：http://www.firefox.hk/1179.html

我是这篇文章的作者，希望文中的内容能对您有所帮助。同时并肩作战也真诚的邀请您常回来看看。 原文链接：头痛的css（div）布局
本文为并肩作战版权所有，转载时必须以链接形式注明作者和原始出处及本声明。