|
首先帮大家区分一些针对IE6的hack写法,看到以后就知道要对付万恶的IE6了--然后来整理针对IE6的一些CSS Hack编写时的注意点小结,需要的朋友可以参考下
区分出IE6的hack写法
1.区别IE6、7与FF/IE8：
JavaScript Code复制内容到剪贴板
- background:blue;*background:orange;
引用
显示效果：
IE 6/7：orange
FF/IE8:blue
原理：FF/IE8不支持*开头，而IE6/7都支持。
2.区别IE6与IE7/IE8/FF：
CSS Code复制内容到剪贴板
- background:green;_background:blue;
引用
显示效果：
IE7/8/FF：green
IE6:blue
原理：IE6支持下划线"_"，IE7、8和firefox均不支持下划线。
3.区别FF/IE8和IE6/7：
CSS Code复制内容到剪贴板
- background:orange;+background:green;-background:blue;
或者
CSS Code复制内容到剪贴板
- 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复制内容到剪贴板
- .test{
- color:#000; /* Firefox */
- color:/*\**/#00f\9; /* IE8 */
- *color:#f00; /* IE7 */
- _color:#0f0; /* IE6 */
- }
IE6兼容的一些额外需要考虑的细节：
1.position:fixed
对这个属性印象深刻，每一次需要用到固定的时候，IE6总是蹦出来告诉你，我不支持position:fixed,你要对我特殊点，要么使用CSS表达式，要是时刻计算滚动的高度，再加上position:absolute.
2.浮动双倍边距
当在浮动中使用margin时，你要时刻记得加上display:inline,不然IE6不给你好脸色，总是会让你布局错乱，就因为它会是双倍的边距。
3.背景透明
之前总是用png8来兼容IE6，实在没办法时，你还要ps上下功夫，图省事的话，你要加一个DD_belatedPNG.JS，各种技能层出不穷，但是都有一个就是耗时不讨好。
4.max-height/min-height
想要给它一个最大尺寸或者最小尺寸时，IE6却告诉你，我只能用确定尺寸，你需要的话，用表达式吧
5.IE6 点击链接出现虚线
呵呵，产品说不去掉影响用户体验，我只想说：用了IE6还谈啥体验。
6.弹窗出现在select上要加个iframe
因为select在IE6中是一个控件，层级比其他层高，所以如果弹窗要兼容IE6，背景记得加多一层iframe
7.尺寸超出会自动延伸
假如你给某个层加了一个高度，当内容超出时，没有overflow:hidden;时，IE6默认会撑开，有时候会出现莫名布局错乱。
8.不能使用.class.class2
使用以上的css写法在ie6中不识别，这导致了，很多时候你不得不改变重构的策略，改用.class-class1的写法。
9.盒子模型解析不一致
在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 的大小。 | 
发表于 2016-5-26 12:20:11
