对于IE6的1些CSS Hack撰写时的留意点小结

2021-03-18 07:36 jianzhan

区别出IE6的hack写法
1.差别IE6、7与FF/IE8:

JavaScript Code拷贝內容到剪贴板
  1. background:blue;*background:orange;   

引入
显示信息实际效果:
IE 6/7:orange
FF/IE8:blue
基本原理:FF/IE8不适用*开始,而IE6/7都适用。

2.差别IE6与IE7/IE8/FF:

CSS Code拷贝內容到剪贴板
  1. background:green;_background:blue;   

引入
显示信息实际效果:
IE7/8/FF:green
IE6:blue
基本原理:IE6适用下划线"_",IE7、8和firefox均不适用下划线。


3.差别FF/IE8和IE6/7:

CSS Code拷贝內容到剪贴板
  1. background:orange;+background:green;-background:blue;  


CSS Code拷贝內容到剪贴板
  1. background:orange;*background:green!important;*background:blue;  

引入
显示信息实际效果:
IE6:blue
IE7:green
FF/IE8:orange
基本原理:IE6能鉴别-,IE7能鉴别+,IE8和FF都不可以鉴别+和-
IE8/FF都不鉴别*,IE7优先选择鉴别!important,IE6不可以鉴别!important。


4.可另外区别IE8、IE7、IE6、Firefox的CSS hacks:

CSS Code拷贝內容到剪贴板
  1. .test{   
  2.     color:#000/* Firefox */  
  3.     color:/*\**/#00f\9; /* IE8 */  
  4.     *color:#f00/* IE7 */  
  5.     _color:#0f0/* IE6 */  
  6. }  

IE6适配的1些附加必须考虑到的细节:
1.position:fixed

对这个特性印象刻骨铭心,每次必须用到固定不动的情况下,IE6一直蹦出来告知你,我不适用position:fixed,你要对我独特点,要末应用CSS表述式,如果時刻测算翻转的高宽比,再再加position:absolute.

2.波动双倍边距

当在波动中应用margin时,你要時刻记得再加display:inline,要不然IE6不给你好脸色,一直会让你合理布局紊乱,就由于它会是双倍的边距。

3.情况全透明

以前一直用png8来适配IE6,确实没法时,你还要ps左右时间,图方便的话,你要加1个DD_belatedPNG.JS,各种各样专业技能五花八门,可是都有1个便是耗时不取悦。

4.max-height/min-height

要想给它1个最大规格或最少规格时,IE6却告知你,我只能用明确规格,你必须的话,用表述式吧

5.IE6 点一下连接出現虚线

呵呵,商品说不去掉危害客户体验,我只想说:用了IE6还谈啥体验。

6.弹窗出現在select上要加个iframe

由于select在IE6中是1个控制,等级比别的层高,因此假如弹窗要适配IE6,情况记得加多1层iframe

7.规格超过会全自动拓宽

倘若你给某个层加了1个高宽比,当內容超过时,沒有overflow:hidden;时,IE6默认设置会撑开,有时会出現莫名合理布局紊乱。

8.不可以应用.class.class2

应用以上的css写法在ie6中不鉴别,这致使了,许多情况下你迫不得已更改重构的对策,改用.class-class1的写法。

9.盒子实体模型分析不1致

在Quirks Mode中,盒子的宽度测算与Standards Mode的不一样

在 IE 盒实体模型中,
box width = content width + padding left + padding right + border left + border right,
box height = content height + padding top + padding bottom + border top + border bottom,
而在 W3C 规范的盒实体模型中,box 的尺寸便是 content 的尺寸。