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
- 站长推荐
