HTML5前端教程之css兼容性

2019-09-08 郑州网站建设  

一、兼容性是什么?

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


HTML5前端教程之css兼容性

二、为什么浏览器会存在兼容问题?

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

三、处理兼容问题的思路:

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

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

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

四、渐进增强和优雅降级

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

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

五、常见的兼容问题

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以下的透明

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

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

1)设置其高度为0,并设置overflow:hidden。


六、一些兼容性相关的工具和库

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1267.html转载请标明出处,谢谢合作!
标签:
  • 兼容性
  • HTML5css
  • 同样