CSS 兼容性

概述

兼容性问题一直都是开发不可忽略的内对于CSS来说，保证各浏览器一致展现并不容易。CSS兼容性问题一般来源于浏览器类型、以及浏览器版本。对于CSS兼容性问题，个人更倾向于如何去规避与解决这些问题，而不是去深入了解为什么会出现这种问题，我毕竟不是“考古”的。很多公司已经放弃对一些低版本浏览器的支持，想想也是，我们精心设计的产品，被一些连浏览器都不愿意升级的用户使用，想想还是算了吧……

常见问题与处理办法

为了能够较好的规避一些兼容性问题，了解一些常用的CSS兼容性问题还是有必要的。常见的兼容性问题具体来源于浏览器厂商、IE个版本以及Firefox的兼容性。

浏览器厂商

  • 厂商前缀

    • Webkit内核：产要代表为Chrome和Safari，前缀 -webkit-
    • Gecko内核：主要代表为Firefox，前缀 -moz-
    • Trident内核：主要代表为IE浏览器，前缀 -ms-
    • Presto内核：主要代表为Opera，前缀 -o-

    关于厂商前缀的书写，可以参考 CSS 代码规范 属性与值 > 私有属性

  • 默认样式

    一些浏览器默认样式：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某个版本

附

资源
posted @ 2017-01-18 17:02  Ciimoo  阅读(199)  评论(0)    收藏  举报