DIV+CSS布局之浏览器兼容问题及CSS Hack使用方法

摘要介绍DIV+CSS布局中常见的浏览器兼容性问题以及解决方法,还有CSS Hack的使用方法。个人不建议使用CSS Hack,还不是很符合W3C标准。只要CSS代码写得标准,也根本用不着CSS Hack方法。

一直以来,我认为自己是个很幸运的人。5年了,和绝大多数人不一样,我依然从事着我喜欢的工作——网站开发,这是我的兴趣。DIV+CSS布局可以说是我擅长的领域之一。总想写点什么,算是一种回顾,就像这个博客建设的初衷一样,分享、自由、快乐。我想和我有着相同兴趣、梦想的人,都可以在SEM领域成为领头羊。下面,针对DIV+CSS布局的常见兼容性问题以及CSS Hack的使用方法谈一些经验和心得。

DIV+CSS布局是什么?

DIV+CSS布局无疑提Web 2.0时代最流行的网页布局技术。你所看到的网站,大到网易、新浪小到企业、个人博客,绝大部分都采用了DIV+CSS布局。包括当初在校学习阶段,我就毅然抛弃了TABLE布局,专心研究DIV+CSS布局去了。可能是比较新出来的网页技术,当时也就图一新鲜吧,但是现在,我想我是做了件正确的事。DIV+CSS布局真正意义上实现了HTML和CSS分离,是网站前端开发必不可少的利器。

DIV+CSS布局难不难?

这段老手直接跳过。对于新手上路或是DIV+CSS布局技术运用还不算熟练的人,可能感觉这东西有点悬乎,常常给浏览器兼容性就折腾了半天还不一定能解决,可能会望而却步或是直接一脚把它踢开了。事实上,DIV+CSS布局是非常简单、易于理解的,它就是利用CSS来控制HTML里DIV盒子的浮动、大小、样式一类。在HTML代码中,DIV你可以理解为一个一个的有名字的(ID或是CLASS)盒子,这个盒子里可能会放上H1、H2、H3、UL、OL、LI等元素,你只需要利用CSS来控制它们的样式即可。至于CSS方面,你完全不用担心,可能一开始要借助DREMWEAVER来做,其实久了,你用一个空白记事本也同样可以做到。常用的CSS属性里,无非就是float、height、width、text-align、color、overflow这些属性,天天都去写的话,随便哪个不是滚瓜烂熟了。所以说,学习DIV+CSS布局并不难,从基础入手,熟能生巧!

DIV+CSS布局中浏览器兼容问题和CSS Hack兼容方法

下面,为大家介绍下个人在DIV+CSS布局中遇到的一些问题以及解决办法,算是经典的例子了,其实这些问题的产生在于各个浏览器对CSS的兼容性不同。我们主要考虑Internet Explorer 6(IE6)、Internet Explorer 7(IE7)和Mozilla Firefox(FF)的浏览器兼容性问题,其实又以IE6最头疼,个人感觉早该封杀掉IE6了,都出IE9了!像其它的非主流浏览器,如Opera、Safari等,感兴趣的可以研究研究,正常不作考虑范围。

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来解决,这里区别于上面介绍的换行问题。这个方法就原理就是创建一个隐形的内容为空的块来为目标元素清除浮动,如:

<div>
<ul>
<li>test....</li>
</ul>
<div></div>
</div>

我们的CSS可以这样写:

.clearfix{clear:both;content:".";font-size:0;height:0;overflow:hidden}

这个方法很好用,可以说是屡试不爽,同样也适用于页面其它地方,个人建议,在你关闭一个父DIV之前和上面的例子一样,加上一句<div></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页头申明:<meta http-equiv="x-ua-compatible" content="IE=7" />,以IE7的模式兼容IE8。

附:CSS Hack浏览器兼容写法大全

CSS Hack浏览器兼容写法大全(1)

CSS Hack浏览器兼容写法大全(2)

以上就是DIV+CSS布局常见浏览器兼容问题的解决办法以及一些CSS Hack的使用方法,个人不建议用Hack方法,毕竟还不是很符合W3C标准。其实,不管任何浏览器,只要CSS代码写得标准,也用不着Hack方法,可以看下我的博客HTML以及CSS代码,我对这方面要求还是很严苛的。如果你还有什么CSS其它问题,可以在下面留言给我,我会及时回复,帮你解决的!

给我留言

图片 表情