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

1, 兼容性是什么?

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

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

2,为什么浏览器会存在兼容问题?

不同厂家开发所用的核心架构不同和代码很难重合,实现方式也有差异,所以呈现在页面上的样式也就会有一部分的差异,看着会有些不同。

3,处理兼容问题的思路:

1):要不要去做?(看做的产品的影响程度,受众面,是主打效果还是基本功能)

2):做到什么程度?(想要那些浏览器支持,就给那些浏览器做兼容)

3):怎么做?(根据兼容问题,来选择那些框架,和那些兼容工具。)

4,渐进增强和优雅降级

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

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

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

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。

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

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 正是为解决这一难题应运而生,它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。

相关推荐