前端开发常见的兼容性问题

作为一个前端开发者，最烦恼的应该是解决浏览器的兼容问题了吧，为了使网页能在浏览器下正常展现和提高用户的体验度。现在我来总结下我在工作中所遇到的一些问题以及我的一些解决方法。

css设置透明度

		==IE浏览器使用滤镜实现==
		filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)
		==非IE浏览器==
		opacity:0.5

使用CSS 3中的各种特效，都需要加上各种前缀让不同的浏览器得以支持

     例如：加上前缀  

	        -moz- /*Firefox浏览器*/
			-webkit-  /*WebKit核心浏览器*/
			-o-    /*Opera浏览器*/

**这时我们可以使用Less CSS Framework解决书写样式的兼容性问题**
   *LESS将CSS赋予了动态语言的特性，如变量、继承、运算、函数。LESS既可以在客户端上运行（支持IE6+,Webkit,Firefork)，也可以借助Node.js或者Rhino在服务器端运行。*

在chrome下，小于12px的文本字体都默认为12px显示

解决方法：用 css3 解决这个问题

div{ font-size: 10px; -webkit-transform: scale(0.75);}

浏览器默认的margin和padding不同

利用以下样式来统一初始化

    body{margin：0；padding：0；}

IE6双边距，块级元素设置float后，同时设置margin的情况下，会产生双倍边距

浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

  div{ float:left; width:10px; margin-left：100px;} 

这种情况之下IE会产生200px的距离
解决方案是在float的标签样式中添加**display:inline;**将其转化为行内属性。

IE6下解决select层级高的问题

div在IE6下无法遮盖select，原因是在IE6下，浏览器将select元素视为窗口级元素，这时div或者其它的普通元素无论z-index设置的多高都是无法遮住select元素的。
解决方法：

      1：当浮动层div出现的时候，用JS将select隐藏，当浮动层div消失的时候select恢复出现。
      2.可以用ul,li等进行模拟一个select的元素

IE6不支持PNG透明背景

解决方法:IE6下使用gif图片

IE6下Min-height最小高度

可以加 !Important解决

IE下不支持const关键字来定义常量

这个倒没有啥解决方法，只能统一用var关键字

IE下不支持margin:0auto；设置的元素水平居中

解决方法：在父级添加{ text-align:center; }

用同等比例的图片在PC机上很清楚，但是在移动端缺很模糊问题

主要问题来源于devicePixelRatio
原因是手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，若要图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。代码可以如下：

background:url('../img.png') no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;
display:inline-block; 
width:100%; height:50px;
或者指定 background-size:contain;

ios下不会触发非点击元素如(label,span)的监听事件

解决方法：css增加cursor:pointer。

消除移动端 transition 闪屏

-webkit-transform-style: preserve-3d;     /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;      /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

在ios和andriod中,audio元素和video元素在无法自动播放

解决方法：设置触屏即播

$('html').one('touchstart',function(){
    audio.play()
})

CSS动画页面闪白,动画卡顿问题

解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速

  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

移动端Input 的placeholder会出现文本位置偏上的情况

解决方法：line-height：normal

以上就是工作中经常遇到的兼容问题以及解决方法，后期遇到其他的会继续更新哦~~