css 兼容性问题

html-css019

css 兼容性问题,第1张

1.H5网页touch滑动的时候在苹果手机上出现不流畅的问题

-webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果.

解决办法:给所有网页添加如下样式

说明:

-webkit-overflow-scrolling: touch当手指从触摸屏上移开,会保持一段时间的滚动

-webkit-overflow-scrolling: auto当手指从触摸屏上移开,滚动会立即停止

2. css 苹果手机按钮默认样式如何去掉

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none}

textarea { -webkit-appearance: none}

3. 如果还有圆角的问题,

** 4.苹果手机不支持box-shadow属性**

如果先给input写边框,用 border:1px solid #ccc

5、去除Chrome等浏览器文本框默认发光边框

6.去掉高光样式:

当然这样以来,当文本框载入焦点时,所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了,这样的话,当文本框载入焦点时,边框颜色就会变为橙色,给用户一个反馈。

7、去除IE10+浏览器文本框后面的小叉叉,只需下面一句就ok了

input::-ms-clear {display: none}

8.H5页面写出来,在chrome中出现如下错误,只需添加如下css即可解决

*{touch-action: pan-y}

CSS(Cascading Style Sheets )叫层叠样式表,用于修饰HTML文档样式;CSS3是CSS2的升级版本,由CSS权威组织在css2的基础之上新增了很多功能和标准,让各大浏览器厂商去实现。但是由于各浏览器出于各种原因,导致对各个功能的实现的时间是参差不齐的,这就导致有些浏览器先实现,有些浏览器后实现,甚至有些浏览器没实现;先实现的浏览器将已经实现的功能做个特殊的标记,表示这个功能是我的私有属性,其他浏览器用不了;而接着如果第二个浏览器也实现了这个功能,它也加一个自己的特殊标记,以此类推,到最后面所有浏览器厂商都实现了该功能。这个时候某个浏览器厂商的人可能就想到,这个功能大家都实现了那这也不算是我的私有属性了,那我就支持不加自己特殊标记的写法吧,接着第二个厂商看到,哟呵是哦大家都实现了,那我也支持不加自己特殊标记的写法,以此类推,到最后大家都支持不加自己特殊标记的写法了,这就是一个属性从开始定义到兼容一些浏览器到兼容所有浏览器的过程。这个过程,甚至到现在很多属性和功能都是在上述的发展着。

所以正是浏览器厂商对CSS3新增功能的实现时间参差不齐,导致了CSS3属性各种各样不兼容的问题。

那如何解决兼容性紊乱的问题呢?

方法一:查文档查手册

下面是两个最常用的两个网址caniuse和CSS手册:

当我们要用某个属性的时候,就去上面两个网址查找该属性的兼容性,对应你要兼容到的浏览器版本,对应的加上前缀之类的操作,如columns:

小结一下,各主流浏览器常加的特殊标记:

1. Safari/Chrome: -webkit-

2. IE:-ms-

3. Firefox:-moz-

4. Opera:-o-

方法二:使用后处理器比如autoprefixer插件自动补齐前缀

这里简单讲一下后处理器和预处理器

注意:cssNext和autoprefixer依赖于postCss

postCss的本质是用js实现的CSS的抽象语法树(AST : Abustract Syntax Tree)

说白了postCss就像一个插槽一样,剩下的具体事情留个其他插件来做了,cssNext和autoprefixer就是它其中的两个插件

有两种方法:

1、在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE。

例如:

padding: 20px !important/For Firefox/

padding: 10px/For IE/

(注意这里IE6是无法识别,important 这个标记的,但它会识别padding: 20px,所以要在后面加上padding: 10px用来覆盖padding: 20px)这个方法适用于修改少量代码。

2、条件注释。(只对IE浏览器有效)这也是北极冰仔部落格目前使用的方法。先为不同浏览器书写各自的CSS样式,再在head中加入以下的代码以适应不同的IE浏览器版本调用:

注意:

gt: greater than (高于)

lte: less than or equal to (低于或等于)

另外:IE还支持一个非标准的标签:comment

This is not Internet Explorer.

This is Internet Explorer.

IE会自动把此标签中的内容当作注释处理掉。

扩展资料

关于css兼容性问题及一些常见问题

目前主流浏览器的兼容性做的都比较好了,以下主要针对IE6,7的不兼容问题进行解决。

1、有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度。

解决方法:给对应的父级加overflow:hidden但是会有部分被隐藏掉,最好是精确计算宽高再设定。

2、在IE6下有元素浮动时,如果宽度需要由内容撑开,就给里边的块元素都加浮动,正常浏览器不用加浮动。

3、在IE6下元素的高度的小于19px的时候,会被当做19px来处理。

解决办法:添加overflow:hidden