web前端课程大纲技术之css兼容性详解

Posted 2021-01-24

1， 兼容性是什么？

同样的html+CSS+JS，但是表现出的外部特征还是不能达到统一，存在瑕疵。同样的代码，有的浏览器效果显示"正常"，有的显示"不正常"。就像同样的去吃大排档，就有的人吃完一点事没有，而有的人就会拉肚子。

2，为什么浏览器会存在兼容问题？

不同厂家开发所用的核心架构不同和代码很难重合，实现方式也有差异，所以呈现在页面上的样式也就会有一部分的差异，看着会有些不同。
3，处理兼容问题的思路：

1）：要不要去做？（看做的产品的影响程度，受众面，是主打效果还是基本功能）

2）：做到什么程度？（想要那些浏览器支持，就给那些浏览器做兼容）

3）：怎么做？（根据兼容问题，来选择那些框架，和那些兼容工具。）

4，渐进增强和优雅降级

1）：渐进增强：现针对低版本浏览器进行基本功能和页面，再针对高版本的浏览器进行效果，交互，和用户体验做出改进。

2）：优雅降级：一开始就先针对于高版本浏览器进行完整的页面展示（效果，交互，功能，用户体验），然后在对低版本浏览器进行兼容

5，常见的兼容问题

1，高度塌陷

浮动元素的父元素自适应（父元素不写高度时，子元素写了浮动后），父元素会发生高度塌陷

解决方案

1） ：给父元素添加声明：overflow：hidden；

2） ：字啊浮动元素下方添加空div。并给该元素声明，clera：both；height：0；overflow：hidden；

2， 最小高度自适应（因为min-heigh本身就是一个不兼容的css属性，所以各个浏览器不兼容）

1） ：min-height：value；-height：value

2） ：min-height：value；heigth：auto！Important；height：value

3，按钮元素大小不一样

1） ：给按钮统一大小

2） ：外边套一个标签，在标签与按钮样式把input边框和背景去掉

4，图片默认有间距（几个img标签放在一起的时候，有些浏览器会有默认的间距）

1）；给img添加float属性

5，ie6图片下方会产生间隙

1）：为图片设置display；block；

6，ie8以下的透明

1）：filler：alpha（取值范围0-100）例如：filter:alpha(opacity=60)

7，空div的默认行高（清浮动时会使用一个空的div，在大部分浏览器没问题，在ie6中即使div是空的也会有默认行高）

1）设置其高度为0，并设置overflow:hidden。

6，一些兼容性相关的工具和库

1）：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。

2）：Respond.js：是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计

3）：CSS Reset：重置浏览器的css默认属性；浏览器的品种不一样，那么对默认样式的解释不一样，通过reset可以达到显示一致的效果。

4）：normalize.css：是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。

5）Modernizr.js:传统浏览器目前不会被完全取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生，它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。