关于CSS的兼容问题

兼容性

不同的浏览器兼容性不同

• IE的内核为 Trident (但是IE10以后改为了edg内核)，js引擎为JScriptjs引擎
• 火狐的内核为 Gecko，js引擎为TraceMonkey
• 欧鹏的内核为Presto(已被放弃)，js引擎为Carakan
• Safri和谷歌的内核为 Webkit，js引擎为 SquirrelFish/v8

浏览器的解析模式

页面会分成标准模式和怪异模式

1.在script标签内写入document.write(document.compatMode)，如果返回的值为BackCompat则为标准模式未开启，若返回了CSSCompat则标准模式开启。

2.插入DOCTYPE有两种目的：对文档有效性的验证，决定和呈现模式。

3.如过不用DOCTYPE或者错用会让你的页面处于怪异模式（混杂模式）。

4.DOCTYPE前不能写任何内容。

CSS Hack

不同浏览器对CSS的解析不同，则须要设置Hack。

CSS Hack 实现有三种方式：

1.css类内部的 Hack

2.css选择器的 Hack

3.HTML头部的 Hack.

• ite:它是less than equal to 的简写，意思是小于等于
• it:less than ，小于
• gte:greater than or equal to, 大于等于
• gt:greater than,大于
• ！：不等于

w3chelp.com

兼容性要和业务挂钩

渐进增强

确定用户群体，针对低版本浏览器构建页面保证基本功能，再针对高级浏览器进行效果交互性能等进行改进，追加功能。

优雅降级

确定用户群体，一开始构建完整功能，再针对浏览器进行兼容。

转载于:https://www.cnblogs.com/tjboke/p/7141901.html