技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

css巧用两符号#和下横线解决div高宽的浏览器兼容性问题

作者:admin    时间:2013-11-19 20:15:47    浏览:

在复杂的网页框架布局中,div起了绝对的主导作用,而又因为div的语法在各个浏览器中的表现并不一致,因此div的浏览器兼容性写法就起了至关重要的意义。

浏览器兼容性问题的产生

以前,在IE8和Chrome等浏览器尚未风靡互联网的时候,我们只需hack一下IE6和Firefox浏览器即可,那时Firefox成了相对意义上的“标准”浏览器,不过,时过境迁,现在最流行的浏览器不是Firefox,也不是IE6了,而是Chrome和IE8等。

但是,对于网页设计者来说,这并不是一个好的事情,因为,Chrome和IE8,跟Firefox、IE6的标准也不一样,之前hack过的css样式,在Firefox和IE6里显示正常,但是现在在Chrome和IE8浏览器里显示却不一定正常了,有的甚至有严重的错位,或直接显示不出来。为此,网页设计者就需要重新hack一次css,让它兼容目前所有的流行浏览器。

div浏览器兼容性写法 !important 无能为力

网页的框架结构布局固定,由div来完成,因此,div的高度和宽度的浏览器兼容性写法是首要考虑的问题。

Firefox时代,引入了一个hack属性,那就是“!important”,写法如下:

.div{height:23px !important;height:21px}

Firefox可以认“!important”,但是IE6不认,所以上述的css写法可以兼容了Firefox和IE6浏览器。

不过,上述写法在现在已经行不通了,因为,IE8和Chrome虽然也认“!important”这个属性,但是它们各自的div box容器高宽标准是不同的,换句话来说,它们的div box对内部的“padding”、“margin”的处理不一样,这样一来,如果div存在“padding”、“margin”等属性,或者内部又嵌入了<p>、<div>等区域的话,那么Firefox的“height:23px !important;”与IE8的“height:23px !important;”以及Chrome的“height:23px !important;”得到的最后显示出来的高度就不一样。因此,需要hack这个高度!

div浏览器兼容性写法 终极解决方法

这个问题,曾经令我狂抓,不过最后总算找到了一个通俗易容的简单的兼容性hack写法。下面看看hack的代码:

.div{height:23px;#height:22px;_height:21px}

这个写法能很好的兼容目前的所有流行浏览器。我们发现,这个css已经摒弃了“!important”这个属性,取而代之的是新增了一个“#”和一个“_”,这个怎么解释呢?首先,“height:23px”是通用写法,每个浏览器都适用;其次,“#height:22px”是hack IE8浏览器;再次,“_height:21px”是hack IE6浏览器。这是因为,Firefox和Chrome不认“#”,但IE8认,而“_”只有IE6认。

理解了上述的解释,那么我们在hack div的高宽浏览器兼容性时,就游刃有余,驾轻就熟了。

您可能对以下文章也感兴趣

标签: hack  
相关文章
    • IT热文
    • 站长推荐
    565| 421| 484| 875| 585| 422| 707| 915| 473| 555|