浏览器兼容一直是CSS布局中常见的到的问题,初学者也因此走入很多误区,那么通过我的经验,总结了2个方法,既可以避免大部分浏览器兼容问题。

这2个方法具有以下几个优点:

1. 无需使用HACK

2. 简单有效,一看即会

3. 层次化、模块化布局

4. 代码更合理,更易于识别

方法一:解决加内外间距造成浮动错位

我们通常在多栏布局的时候需要使用float 进行DIV的浮动,通常我们会写3个DIV来进行3栏布局,我们希望达到如下效果:

不用HACK 快速解决CSS布局网页浏览器兼容问题-麦氪搜(iMacso.com)
不用HACK 快速解决CSS布局网页浏览器兼容问题-麦氪搜(iMacso.com)

为了达到这种效果,我们会加上margin 让栏目直接由间距,另外还要加上边框,再加上padding让里面的文字不会紧贴边框。但是意外的情况发生了,代码写好了,居然出现下面的情况:

不用HACK 快速解决CSS布局网页浏览器兼容问题-麦氪搜(iMacso.com)
不用HACK 快速解决CSS布局网页浏览器兼容问题-麦氪搜(iMacso.com)

第三栏,跑到了下面。 这个并不是你想要的效果。那么我们来分析一下吧。按照一般的思路。整体宽度为800px,,左栏200,中间400,右栏200,这样看起来很好,但是这几个栏目中间要有间距,所以你要改一下:左栏190,中间400,右栏190这样是不是就OK了呢。

但是为了好看,你加上了边框。但却忘记了边框也会增加宽度,另外你增加了栏目的padding:10px; 我晕,那么这样的实际宽度就成了:左栏:宽度200-外间距10-内间距20-边框2=168,这样才不会错位。但是这样你不觉得有点复杂么,或许你需要配一个计算器。这样的布局一些浏览器显示会有差距哦。

好了,那么说说我的方法吧。根据层次划分,我把布局和显示分开。 布局就是布局除了宽度、浮动外顶多加个外间距,这样我就比较容易计算了。那么我们在布局的栏目里面再加入一个DIV专门用于显示边框,内外间距等,你可以不需要定义宽度,自适应即可。为了便于你记忆,我即兴作诗一首:固定宽度要浮动,不加边框和补丁,里面套个DIV,定义样式起作用!

方法二:解决内浮动元素脱离外层

我们为了做一个产品目录或者图片相册,使用到了UL,或者N个DIV,进行浮动,希望的效果如下:

不用HACK 快速解决CSS布局网页浏览器兼容问题-麦氪搜(iMacso.com)
不用HACK 快速解决CSS布局网页浏览器兼容问题-麦氪搜(iMacso.com)

但是却事与愿违,最近显示下面的样子,外层边框跑到上面去了:

不用HACK 快速解决CSS布局网页浏览器兼容问题-麦氪搜(iMacso.com)
不用HACK 快速解决CSS布局网页浏览器兼容问题-麦氪搜(iMacso.com)

解决这个方法其实也很简单,

1. 可以在外层加入一个float:left; 即可解决。

2. 还有一个方法就是在 浮动结束后最后面放置一个清除浮动的DIV即可。

3. 给外层加上高度或宽度。