DIV+CSS布局中的兼容性问题hack做法

时间：2022-06-25 11:20:35 编辑：袖梨来源：一聚教程网

DIV+CSS布局中的兼容性问题，除了一些小技巧外，常常还需要结合CSS Hack写法来解决。CSS Hack的原理是针对各浏览器对CSS属性的支持和解析结果不同，以及CSS执行中的优先级问题，来针对不同浏览器写不同的CSS。
1）IE中浮动错位问题
经常，我们定义一个DIV浮动的时候，特别是CSS里有用到margin属性，Mozilla Firefox正常，但是IE中这个DIV会跑到下一行去，解决办法很简单，你只需要在你的CSS属性里加上句：display:inline，如：

代码如下	复制代码
.example{width:300px;float:left;margin-left:10px;display:inline}IE

系列浏览器对margin解析有问题，如果条件尽量多用padding属性来写，这样就不会出现上述问题了。当然，像上面的情况如果还解决不了的话，那就再加上句：overflow:hidden，将溢出的宽度部分隐藏掉，这可能和你的DIV盒子里的元素有关，如下：

代码如下	复制代码
.example{width:300px;float:left;margin-left:10px;display:inline;overflow:hidden}

这样写的话，可以说上述问题完全解决了。
2）善用clear解决换行问题
这点也是常见的，就是我们定义的DIV可能不按我们的设计效果图上来换行，非常讨厌的跟着之前的DIV屁股后面。这个解决办法很简单，只需要在你的CSS属性里加上clear:both清除两边浮动即可完美解决。
3）页面高度自适应的问题
关于页面高度自适应的问题的确很让人头疼，尤其是多层嵌套的时候，不过我们可以借助clear:both来解决，这里区别于上面介绍的换行问题。这个方法就原理就是创建一个隐形的内容为空的块来为目标元素清除浮动，如：

代码如下	复制代码
test.... 我们的CSS可以这样写： .clearfix{clear:both;content:".";font-size:0;height:0;overflow:hidden}

这个方法很好用，可以说是屡试不爽，同样也适用于页面其它地方，个人建议，在你关闭一个父DIV之前和上面的例子一样，加上一句

。
4）巧用min-height解决最小高度问题
在DIV+CSS布局中，常常需要定义DIV元素的最小高度，通过以下结合CSS Hack写法就可以很好的解决。

代码如下	复制代码
#test{min-height:200px;/高度最小值设置为：200px/height:auto !important;/兼容FF，IE7也支持!important标签/height:200px;/兼容ie6/overflow:visible}

5）推荐：通用CSS Hack写法，解决大部分兼容问题
是不是还在为IE和FF下那几个像素的问题折腾的够呛？很简单，只要熟练掌握下面的CSS Hack写法，包你药到病除!

代码如下	复制代码
#style{color:red};/针对FF，这个所有浏览器都识别/， * html #style{color:green};/仅IE6认识，重定义覆盖之前的类/ * +html #style{color:blue};/仅IE7认识，同上/针对IE8，你可以在HTML页头申明：，

以IE7的模式兼容IE8。
附：CSS Hack浏览器兼容写法大全

以上就是DIV+CSS布局常见浏览器兼容问题的解决办法以及一些CSS Hack的使用方法，个人不建议用Hack方法

推荐专题

最新下载

热门教程

DIV+CSS布局中的兼容性问题hack做法

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程