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

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

原文地址:http://blog.51cto.com/14071672/2325492

时间: 2024-11-05 18:22:21

web前端课程大纲技术之css兼容性详解的相关文章

CSS兼容性详解

盒模型属性 [宽高width/height] (全兼容) width height (IE6-不支持) min-width max-width min-height max-height [内边距padding] padding [边框border] (全兼容) border border-width border-color border-style (IE8-不支持) border-radius (IE10-不支持) border-image border-image-source bord

学习web前端课程必掌握技能总结

前端开发是近几年来兴起的新兴行业,是IT行业中要求相对较低的职业,同时就业薪资相对较高,很多人通过参加web前端培训实现了高薪就业梦,那web前端课程到底包括哪些技术呢? Web前端开发技术包括三个要素:HTML.CSS和JavaScript,但随着RIA的流行和普及,Flash/Flex.Silverlight.XML和服务器端语言也是前端开发工程师应该掌握的.随着时代的发展,前端开发技术的三要素也演变成为现今的:html5,css3,jquery. 学习html,这个是最简单的,也是最基础的

萧井陌WEB前端课程

详情请交流  QQ  709639943 00.萧井陌WEB前端课程 00.微信小程序 美甲商城 00.微服务的入门级微框架Spring Boot快速入门 00.基于java的微信公众号二次开发视频教程 00.leetcode 算法 面试 00.北风网 零基础到数据(大数据)分析专家-首席分析师 00.快速上手JMeter 00.Jmeter 00.2017年Java web开发工程师成长之路 00.R语言速成实战 00.R语言数据分析实战 00.Python+Django+Ansible Pl

web前端入门到实战:CSS实现平行四边形布局效果

如何实现下图所示的平行四边形布局效果? 一.skewX的局限 一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而实现平行四边形效果 HTML如下: <div class="input-x"> <input class="input" placeholder="您的姓名"> </div> CSS如下,形状的关键就是下面红色高亮

web前端入门到实战:CSS:scroll-snap滚动事件停止及元素位置检测

一.Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置.类似幻灯片广告效果就可以纯CSS实现. 而且CSS Scroll Snap的兼容性非常好,移动端几乎可以放心使用. 二.源自实际项目的scroll-snap场景 今天下午在实现一个功能需求的时候,正好遇到一个场景非常适合使用Scroll Snap来实现,滑动依次显示人物角色.于是就大胆使用了下,哇,好棒,无需

web前端入门到实战:css动画优雅降级的简单总结

CSS动画优雅降级的简单总结 CSS动画相关属性 transition:兼容性 transform 3D:兼容性 transform 2D:兼容性 animation: 可以看到动画在IE8(这里主要讨论IE)及以下完全不支持,IE9由于只支持transform(非transform3d) 优雅降级 <div class="a"></div> CSS: web前端开发学习Q-q-u-n: ××× ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(

web前端入门到实战:CSS自定义属性+CSS Grid网格实现超级的布局能力

最近我还注意到的一件事就是CSS自定义属性.CSS自定义属性的工作方式有点像SASS和其他预处理器中的变量,主要的区别在于其它方法都是在浏览器中编译后生成,还是原本的CSS写法.CSS自定义属性是真正的动态变量,可以在样式表中或使用javascript即时更新,这使得它们具有更多的可能性.如果你熟悉JavaScript,我喜欢把预处理器变量和CSS自定义属性之间的区别想象成与const和let之间的区别相似--它们都有不同的用途. CSS自定义属性可以方便的实现很多功能(例如主题变化).最近我一

web前端入门到实战:CSS阴影效果的比较 drop-Shadow与box-Shadow

drop-shadow与box-shadow都是阴影效果(光晕效果)的css属性,二者最大的不同点在于:box-shadow只能制作矩形的阴影,而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影.底下是二个css属性的用法: .drop-shadow { -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7)); filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.

web前端入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡慌色输入框代替了背景样式,看起来有些怪异. 那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的慌色背景:如: web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新