IE6/IE7/FireFox的CSS hack总结

发布时间：2018-09-01 19:39:08 所属栏目：创业来源：站长网

导读：择要昨天去178.com公司介入笔试，对CSS仅有一道题，要求是写CSS，在IE6/IE7/FF三款赏识器下表现差异的结果，原来是能写滴，可没想到竟然是选择题，并且用到了子选择器，这下完了，这语法很少见到，以是平常也不怎么存眷，没想到竟然在这个时辰碰上了。好

择要

昨天去178.com公司介入笔试，对CSS仅有一道题，要求是写CSS，在IE6/IE7/FF三款赏识器下表现差异的结果，原来是能写滴，可没想到竟然是选择题，并且用到了子选择器，这下完了，这语法很少见到，以是平常也不怎么存眷，没想到竟然在这个时辰碰上了。好吧，既然云云，回到网上，爽性就把全部的css hack要领温习一遍，争取打遍全国无对手，嘿嘿~~

正文

起首来看标题要求。
针对的html代码：

写CSS代码，别离在IE6、IE7、FF下表现差异的结果：

简朴声名一下：IE6的划线是在下边、IE7是中间、FF是上边。由于IE6兼容性最差，以是优先级天然低了，况且它的hack要领就是回收下划线；IE7较量中规中矩；FF则最尺度了，这下能记着各个图对应的是哪个赏识器了吧:)

OK，开始我们的hack之旅吧。

第一种要领：

div{
    text-decoration:overline;
    *text-decoration:line-through;
    _text-decoration:underline;
}

道理是：

简朴地说，就是操作下面几点：
1.各个赏识器理会CSS的语法不尽沟通
2.CSS语礼貌则：后头的属性包围前面的属性
而这里仅仅是操作了_（这个很好记，IE6的专属）和*（用于IE6和IE7），接下来操作一下!important语法。

第二种要领：
!important语法针对的是“后头的属性包围前面的属性”这一语法，也就是说标识了!important的属性，是不被后头的沟通属性所包围的，而IE6不熟悉这个，导致其他赏识器很轻易按照这点“陵暴”IE6：

div{
    text-decoration:overline;
    *text-decoration:line-through!important;
    *text-decoration:underline;
}

道理：
1.FF不熟悉*，但IE6/IE7熟悉
2.IE6不熟悉!imprtant，但IE7熟悉

留意，次序不能换，假如改为下面这样：

text-decoration:overline;
*text-decoration:underline;
*text-decoration:line-through !important;

IE6和IE7都一样了。

----------------------------------------------

上网查了一下，IE6是支持!important属性的（该属性为CSS1语法，支持IE4+），上面的写法只是IE6的一个bug（统一个{}内里，沟通属性取后者），若想要IE6支持，一样平常的做法是将CSS拆分，好比：

div{
text-decoration:line-through!important;
}
div{
text-decoration:underline;
}
这样，在IE6下，表现的是line-through结果。

-----------------------------------------------

第三种要领：

先看一个表

为了利便影象，在上面谁人hack表增进了“针对工具”一列（关于*旁边有无空格均可，可以领略其同时也作为脱离符），必要增补的是IE7的专属写法：*+html div

在此就操作IE6和IE7的专属写法：

div{
    text-decoration:overline;
}
*+html div{
    text-decoration:line-through;
}
* html div{
    text-decoration:underline;
}

第四种要领：

div{
    text-decoration:overline;
}
html*div{
    text-decoration:line-through !important;
    text-decoration:underline;
}

道理：操作IE6/IE7的配合专属 + IE6不懂!important

第五种要领：

body>div{
    text-decoration:overline;
    *text-decoration:line-through;
}
div{
    text-decoration:underline;
}

道理：操作IE6不懂>这种选择符 + 针对属性的hack

尾

回过甚总结一下，可以发明道理就是第一种要领内里说的，而各人同时要记着的也就是第三种要领内里谁人表格。
大概会有人说，还可以操作IE特有的注释语法，但我小我私人有代码洁癖，加上那种要领仅针对HTML代码，而web尺度内里，CSS代码都风俗单独写成文件（便于引入多个网页文件），以是这种要领也就跳过了。其它尚有什么/**/可能@important之类的，也暂且不想研究，看着让人头晕，就算我本身此刻写好了，未来预计也许连本身都看不懂，更别说此外维护职员了。以是说，本文先容的要领，假如能办理题目，那就足够了，没须要逼着本身成为技能狂人，去研究”i++++2”这种有些失常的题目:)

最后，写得有些急遽，若有错误，还望各人指正，感谢。

转自：http://www.cnblogs.com/wslcn/

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网