首页 > 代码库 > 关于CSS的兼容问题

关于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

兼容性要和业务挂钩

渐进增强

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

优雅降级

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

关于CSS的兼容问题