资源下载 - 从此开始!

下载我_精品源码软件教程资源网

您的位置:主页 > 网页制作 > 正文

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

2018-10-24 19:10 来源:互联网 编辑:admin

在复杂的网页框架布局中,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的高宽浏览器兼容性时,就游刃有余,驾轻就熟了。

打赏一下,我们会为大家提供更多优质资源!

相关文章,95%的人会看!{有内幕、有真相...}

看过本文的人还看过

关闭

微信扫一扫

站长微信账号