标签归档:HACK

CSS hack 的文章

因为之前的公司都是应对在IE以及FF下,对IE6,IE7,FF做的多了. Safari,Google Chrome以及Opera的测试下做的少得去了…(万恶的IE6,狠狠的鄙视一下).看到阿里前端工程师zergine写的一片关于CSS hack整理的文章,觉得很不错,收藏下,共享给所有的前端工程师.

以下是正文内容

—————————————————————————–

CSSHack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务.
我进行前端开发的时候,测试用的浏览器大致有:IE7,IE6,Opera9(文章撰写时版本为9.258825),Safari3(文章撰写时版本为3.0.4523.15),Firefox2(文章撰写时版本为2.0.0.11).
在正常的selector{property:value;}的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一.
IE系列:
selector{+property:value;}在属性名前加上加号”+”,这个Hack只有IE系列可以识别.
selector{*property:value;}在属性名前加上星号”*”,这个Hack只有IE系列可以识别.
selector{_property:value;}在属性名前加上下划线”_”,这个Hack只有IE系列(除IE7外)识别.
*htmlselector{property:value;}在选择器上运用继承法*htmlselector,这个Hack只有IE系列(除IE7外)可以识别.
html/**/>bodyselector{property:value;}在选择器上运用继承法html/**/>bodyselector,这个Hack只有IE系列(除IE7外)可以识别.
selector{property/**/:value;}在属性名和冒号”:”之间加入注释,屏蔽IE6用.
selector/**/{property/**/:value;}在选择器和花括号”{“之间以及在属性名和冒号”:”之间加入注释,屏蔽IE5和IE6用(不屏蔽IE5.5).
select/**/{property:value;}在选择器和花括号”{“之间加入注释,屏蔽IE5用.
*+htmlselector{property:value!important;}在选择器上运用继承法*+htmlselector再加上!important,这个Hack只有IE7可以识别.
Firefox:
Safari:
selector:empty{property:value!important;}用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.
Opera:
@mediaalland(min-width:0px){selector{property:value;}}利用特殊继承法进行定义的话,目前只有Opera可以识别.
以上的Hack并不完整,大家一起补充.
对Hack的运用,最普遍的是CSS盒模型Hack,清除浮动Hack.
CSS盒模型在IE5.X上是有严重解析错误的.这个Hack针对IE5.X:
selctor{width:IE5.X宽度;voice-family:”/”}/””;voice-family:inherit;width:正确宽度;}
清除浮动Hack,相信这个定义用的人很多:
selector:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}

IE8 hack

原文地址:http://www.css88.com/archives/1681,次文章转载自愚人码头.感谢他们写出了这么好的文章.希望更多的WEB前端开发人员能够借鉴.

———————————————————————————————————————

由 愚人码头 撰写  http://www.css88.com/archives/1681

首先感谢“丸子”提供的这个IE8的css hack;

关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack:

.test{

color:#000000;????????????????? /* FF,OP支持 */

color:#0000FF\9;?????? /* 所有IE浏览器(ie6+)支持 ;但是IE8不能识别“*”和“_”的css hack;所以我们可以这样写hack */

[color:#000000;color:#00FF00;????? /* SF,CH支持 */

*color:#FFFF00;???????????????? /* IE7支持 */

_color:#FF0000;?????????????? /* IE6支持 */

}

包括我自己也是使用这种的,这是我前段时间整理的《主流浏览器的一些CSS hack》。(转载请注明出处:WEB前端开发 http://www.css88.com/)

很多人再研究color:#0000FF\9;中的为什么IE6-IE8支持“\9”写法,和它的原理,我只是个工程师,不是科学家,我不懂为什么和它的真正原理,真的!很惭愧!

昨天在某个群里也看到部分前端工程师或网页重构师势利的一面,同样的一个解决方案,大公司有名的前端工程师或网页重构师写的东西都追捧,而小公司没名气的前端工程师或网页重构师写的解决方案却被反问:“css有这种写法吗?看来你连最基本的css的几个属性和属性值都没搞懂;就算你解决了问题你写的css也是不规范的,就是规范你跟我讲讲你解决方案的原理;”同样的一个解决方案,大公司有名的前端工程师或网页重构师写的这些反问质疑就全都没了,拼命的去研究他这个解决方案,呵呵,我觉得那些人很可笑。还有很多人问问题只有得到大公司有名的前端工程师或网页重构师的肯定回答后才放心而又开心的走了,甚至不留一句谢谢。当然没人(包括我)否认大公司有名的前端工程师或网页重构师在业界的影响力,他们为前端和重构业界做的贡献大家都是看得到的,只是觉得做人(特别是我们做技术的)不能太势利,多一点技术共享和探讨,多一点感激,学习成长才是最重要的。我承认我以前经常骂人,骂人家SB,内参国王说的对,骂人家SB就等于骂自己SB,我以前是很SB。不想探讨就看着呗,骂人是不对的!(转载请注明出处:WEB前端开发 http://www.css88.com/)

扯远了,回到IE8的CSS hack,讲讲color:#0000FF\9:

color:#0000FF\9的hack支持IE6-IE8(其他版本没有测试),但是IE8不能识别“*”和“_”的css hack,所以我们可以使用

color:#0000FF\9; ;/*ie6,ie7,ie8*/

*color:#FFFF00;/*ie7*/

_color:#FF0000;/*ie6*/

来区分IE的各个版本。

至于为什么使用“\9”我真的不清楚原因,但是“丸子”测试了其他0-13的数字,最终结果如下:

其中:OP表示Opera,SA表示Safari,Ch表示Chrome;当然你如果还有耐心可以测试“\14”,“\15”,“\16”。。。

从上面测试结果我们可以看出“\0”的写法只被IE8识别,ie6,ie7都不能识别,那么“\0”应该是IE8的真正hack。主流浏览器的CSS hack这样更好一些:

(转载请注明出处:WEB前端开发 http://www.css88.com/)

.test{

color:#000000;????????????????? /* FF,OP支持 */

color:#0000FF\0;?????? /* IE8支持*/

[color:#000000;color:#00FF00;????? /* SF,CH支持 */

*color:#FFFF00;???????????????? /* IE7支持 */

_color:#FF0000;????????????? /* IE6支持 */

}

其中:OP表示Opera,SA表示Safari,Ch表示Chrome;

这篇日志由 愚人码头, 发表在 2009年07月18日 于 12:47 下午, 文件归档于 (x)html+css 标签为 and tagged css hack, IE8. 添加永久链接到书签中. 获得所有评论更新使用这里的 日志RSS源. 发表评论 或者复制引用通告地址: 引用通告 URL.

From – http://www.css88.com/archives/1681