2023年6月21日发(作者：)
前端开发常见的兼容性问题作为⼀个前端开发者，最烦恼的应该是解决浏览器的兼容问题了吧，为了使⽹页能在浏览器下正常展现和提⾼⽤户的体验度。现在我来总结下我在⼯作中所遇到的⼀些问题以及我的⼀些解决⽅法。css设置透明度 ==IE浏览器使⽤滤镜实现== filter:progid:(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)，也可以借助或者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('../') 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(){ ()})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以上就是⼯作中经常遇到的兼容问题以及解决⽅法，后期遇到其他的会继续更新哦~~
2023年6月21日发(作者：)
前端开发常见的兼容性问题作为⼀个前端开发者，最烦恼的应该是解决浏览器的兼容问题了吧，为了使⽹页能在浏览器下正常展现和提⾼⽤户的体验度。现在我来总结下我在⼯作中所遇到的⼀些问题以及我的⼀些解决⽅法。css设置透明度 ==IE浏览器使⽤滤镜实现== filter:progid:(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)，也可以借助或者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('../') 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(){ ()})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以上就是⼯作中经常遇到的兼容问题以及解决⽅法，后期遇到其他的会继续更新哦~~
发布评论