更多课程 选择中心


UI培训

400-111-8989

段老师分享 | CSS hack兼容总结


人生就是一个不断反省不断进步的过程,常常总结自己做过的事,说过的话,就会让自己在总结中进步,工作和学习也一样。总结有利于及时找到自己的不足并改正,有利于对自己的计划进行规划,总结给了人努力工作的动力,培养了人思考的习惯,使工作更有效率,头脑更加清醒,目标更加明确,工作更有意义。日事日毕,日清日结。

今天达内ui培训小编为大家整理了段老师为大家带来的CSS hack兼容总结,希望对小伙伴们在今后网页设计中有所帮助。

针对各浏览器下Hack的写法:

1、 Firefox

@-moz-document url-prefix() {

.selector {

property: value;

}

}

2、 Webkit内核浏览器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0) {

Selector { property: value; }

}

3、 Opera浏览器

@media all and (min-width:0) {

Selector {property: value;}

}

4、 IE9浏览器

:root Selector {property: value\9;}

5、 IE9以及IE9以下版本

Selector {property:value\9;}

6、 IE8浏览器

@media \0screen{

Selector {property: value;}

}

7、 IE8以及IE8以上的版本

Selector {property: value\0;}

8、 IE7浏览器

*+html Selector{property:value;}

*:first-child+html Selector {property:value;}

9、 IE7及IE7以下版本浏览器

Selector {*property: value;}

10、 IE6浏览器

Selector {_property/**/:/**/value;}

或者:

Selector {_property: value;}

或者:

*html Selector {property: value;}

结语

在Web页面制作中尽量不要使用CSS Hack来处理兼容问题。因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求,或者说违背了浏览器的某些规则而造成的,所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果,除非到了万 不得已情况下,才考虑CSS的Hack。

预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:UED、UCD、UE、UI、交互设计这 5 个名词的概念有哪些区别?
下一篇:PS AI CDR文件格式互转方法大全(图)

太全面了!UI设计师都需要知道的知识

B2B、SaaS等企业软件中的交互设计总结

平面设计与包装设计!

初学平面设计应该注意些什么?看哪些书?

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
贵州省

广西省

海南省