CSS 2.0在IE6、7下的恶心表现

开发前台的朋友都知道,尽管我们就算用CSS2.0的东西,仍然会有诸多问题,开发一个兼容良好的页面,我们身边常备的必然是IETester这款神器,它可以帮我们测试各种IE版本的情况下,我们的页面到底怎么样,然后它有一些JS、CSS查看功能。所以,做一个网站现在就兼容性就得调半天,结合IE、Firefox、Chrome来反复看外观是经常的事。好吧,来讲来我的经历吧,很久以前我在图书馆借过一本CSS Mastery的书,真心不错,然后我就踏上了这条悲剧的Web浏览器兼容之路。

  主要讲下我经常遇到的问题:

  1、3像素位移:IE6下的古老的问题,当对一个div用了float元素时,而div未使用时则会在两个div之间出现3个像素的间隔。修复的办法就是两者都float,或者手动调整已浮动的div的属性margin-right/margin-left为-3px。

  2、div有高度:IE6下,div的高度height无论设置为多小,仍显示的是一个12px左右高度的层,这时候我一般是把line-height属性设置为0,就正常了。不过网上也有其它方案,我没怎么用过,大家自行测试吧:在定义height值的同时,还定义font-size为0,或者定义overflow为hidden。

  3、overflow不管用:IE6的overflow只有在元素的height和width值都设置,且display为block的时候才有用。

  4、雅黑字体不显示:IE6/7,设置了字体font-family为“微软雅黑”,却没有任何效果,这时用"Microsoft YaHei"可能会解决此问题。

  5、png无透明度:IE6下,其实这个问题解决方案已经比较成熟了,有各种js文件可以帮助解决,不过我一般还是趋向于使用filter来完成少量的透明度图片处理:

1 background:url('imgs/test.png') no-repeat;
2 _background:none;
3 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='imgs/test.png');

  原理就是只有IE6才能识别_开头的css元素,然后使用微软的filter来做这个透明度,虽然效率会低了点,但是少量图还是无所谓的。

  6、z-index无效:IE6、IE7的绝对定位都有这个问题,具体问题如果父标签不同,想要比较z-index来实现层叠的话就会失败,IE6、7都认为先要“拼爹”,看父元素的z-index哪个大,再来比较自己的z-index属性。如果父元素没有这个值,就默认为0,唉,这IE是要闹哪样,解决方案就是一层一层地加z-index,加postion属性值,让儿子能找到爹。

     这种乱七八糟的Bug太多了,于是网上有各种浏览器的CSS hack来帮助我们修正显示的不统一问题。      以width属性为例CSS Hack主要有:

用法      支持
  _width:100px;      IE6
  *width:100px;      IE6、IE7
  +width:100px;      IE7
  width:100px\9;      All IE
  @media all and (-webkit-min-device-pixel-ratio:0){选择符{width:100px;}}         Chrome、Safari  
  @media all and (min-width:0px){ 选择符 {width:100px\0;}}      Opera
  width:100px\0;       IE8、IE9
  width:100px\9\0;      IE9

另外还可以使用IE特有的条件判断语句:

<!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]-->
<!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本(不包含IE6)。 <![endif]-->
<!--[if IE 6]> 这段文字仅显示在 IE6。 <![endif]-->

上面的语句都是通过IE专属的条件注释来完成判断,lt=小于,gt=大于,lte=小于及等于,gte=大于及等于,上面的6代表了IE版本号,我们可以取6、7、8、9...分别区别IE版本,再在中间的部分插入专属的Html代码(JS、CSS),以修正不同IE浏览器版本的问题。