CSS 兼容性
概述
兼容性问题一直都是开发不可忽略的内对于CSS来说,保证各浏览器一致展现并不容易。CSS兼容性问题一般来源于浏览器类型、以及浏览器版本。对于CSS兼容性问题,个人更倾向于如何去规避与解决这些问题,而不是去深入了解为什么会出现这种问题,我毕竟不是“考古”的。很多公司已经放弃对一些低版本浏览器的支持,想想也是,我们精心设计的产品,被一些连浏览器都不愿意升级的用户使用,想想还是算了吧……
常见问题与处理办法
为了能够较好的规避一些兼容性问题,了解一些常用的CSS兼容性问题还是有必要的。常见的兼容性问题具体来源于浏览器厂商、IE个版本以及Firefox的兼容性。
浏览器厂商
-
厂商前缀
- Webkit内核:产要代表为Chrome和Safari,前缀
-webkit-
- Gecko内核:主要代表为Firefox,前缀
-moz-
- Trident内核:主要代表为IE浏览器,前缀
-ms-
- Presto内核:主要代表为Opera,前缀
-o-
关于厂商前缀的书写,可以参考 CSS 代码规范
属性与值 > 私有属性
- Webkit内核:产要代表为Chrome和Safari,前缀
-
默认样式
一些浏览器默认样式:IECSS
关于浏览器默认样式的重置,可以参考 Normalize
本人调整后的重置样式如下:
/*清除内外间距*/ body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0} /*重置文本样式*/ address,caption,cite,code,dfn,em,i,th,var,b{font-style:normal;font-weight:normal} /*使用-webkit-tap-highlight-color:rgba(0,0,0,0) 去除Touch端点击时高亮效果*/ select,textarea,a,div,span{-webkit-tap-highlight-color:rgba(0,0,0,0)} /*使用-webkit-touch-callout: none禁用系统默认菜单*/ /*使用-webkit-user-select:none禁止用户选择文本*/ html,body{-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased} input::-webkit-input-speech-button{display:none} /*使用outline-style:none去除标签获取焦点时边框*/ a:focus,input,textarea{outline-style:none} input[type="text"],input[type="password"],input[type="submit"],textarea{outline-style:none;-webkit-appearance:none} input{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0} textarea{resize:none;overflow-y:auto;overflow-x:hidden} center { margin: 0 auto; text-align: center } table{border-collapse:collapse;border-spacing:0} li{list-style:none} fieldset,img{border:0} img{vertical-align:top} *:focus {outline: none;} q:before,q:after{content:""}
CSS相关
详细内容见:
本人崇尚不兼容 IE6,IE7,所以有需要可以查看上诉两个地址,查找答案。
CSS Hack
个人使用 Hack 时,选择容易记忆、容易区分的 Hack 进行使用。
具体使用的Hack可以自己查询 CSS Hack 查询表: CSSHack
建议使用如下内容:
-
选择器
/* IE6 */ * html #selector /* IE7 */ * + html #selector
-
属性
/* IE6 */ _property: value; /* IE7 */ *+property: value; /* IE6 & IE7 */ *property: value;
-
属性值
/* IE */ property: value\9; /* For IE8+ , Opera without Webkit */ property: value\0; /* IE8+ */ property: value\9\0 /* IE8+ */ property: value\0/
-
条件Hack
<!--[if <keywords>? IE <version>?]> <link rel="stylesheet" href="*.css" /> <![endif]-->
- 空:指定是否IE或IE某个版本
- gt(greater than): 大于IE某个版本
- gte(greater than or equal to): 大于等于IE某个版本
- lt(less than): 小于IE某个版本
- gt(less than or equal to): 小于IE某个版本
附
资源
- 浏览器的市场份额: 百度流量研究院
- 兼容性查询: Caniuse
- 浏览器默认样式: IECSS
- 浏览器Hack: BrowserHacks
- CSS Hack 查询表: CSSHack
- CSS Values: CSS Values
- CSS 检查: CSS Validation Service
- QuirksMode: QuirksMode