同安距离翔安多远（常见浏览器兼容性问题及解决办法总结）

不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同；

解决办法：在CSS文件开头    
    
   ，加*{margin: 0; padding: 0;}     


     


     

，把所有标签的margin和padding设置为0即可    
    
    
。

在IE6中




 




 




，块元素设置float并且有水平方向的margin时
   

   

  ，margin显示出来会比设置的值大     

     

     
，会导致最后一块元素被顶到下面去；

解决办法：可以将块级元素display设置为inline


     


     


   。

在IE6 




  




  




，IE7等浏览器

  


  


 ，标签高度小于10px时     
     
     ，实际的高度会超出设置的高度  




   




   




，这是因为浏览器给标签设置了一个默认的最小高度；

解决办法：设置{overflow: hidden;}


 



 



，或者设置line-height小于你设置的高度
 




 




 

。

在某些浏览器中               ，图片有默认的间距(所有有文字属性的标签都会有边距   




    




    



，除非两个标签连在一起没有隔开)；

解决办法：使用float为img布局













，因为所有标签设置float之后都会变成块级元素              ，块级元素浮动时会紧挨在一起    



     



     


，没有边距；此外可以让HTML的img标签紧挨在一起














，不要隔开    
    
   ，但是会影响HTML文档的结构     


     


     

，不太美观   

   

   

。

标签最低高度设置min-height不兼容问题；

解决办法：如果我们要设置一个标签的最小高度200px




 




 




，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;} 

     

     

  。

IE9以下浏览器不能使用opacity；

解决办法：{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}

  




  




  
。

7.两个块级元素
   

   

  ，父元素设置了overflow:auto     

     

     
，子元素设置了position:relative 




  




  




，且高度大于父元素

  


  


 ，在IE6    
    
   、IE7会被隐藏而不是溢出；

解决办法：父级元素设置position:relative  


  


  


。

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题     
     
     ，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题  
     
     
 。在网站的设计和制作中  




   




   




，做好浏览器兼容


 



 



，才能够让网站在不同的浏览器下都正常显示


   




   




   。而对于浏览器软件的开发和设计               ，浏览器对标准的更好兼容能够给用户更好的使用体验 



 



 



。

产生的原因

造成浏览器兼容性问题的根本原因就是 各浏览器使用了不同的内核   




    




    



，并且它们处理同一件事情的时候思路不同             。

怎么理解上述文字？即： 不同浏览器使用的内核及所支持的HTML等网页语言标准不同













，以及用户客户端的环境不同（如分辨率不同）造成了显示效果不能达到理想效果



    




    




    。

解决方法

前端开发经常需要检查浏览器的兼容性              ，这里推荐(Can I Use)这个查询网站













。它是一个针对前端开发人员定制的一个查询CSS     


     


     

、JS




 




 




、HTML5
   

   

  、SVG在主流浏览器中特性和兼容性的网站    



     



     


，可以很好的保证网页在浏览器中的兼容性              。有了这个工具我们就可以快速的了解到代码在各个浏览器中的兼容情况了














，强烈推荐一波👍    
    
   ，大家赶紧去体验吧✈！界面效果如下图所示：

工具只能给我们显示查询的特性在不同浏览器上的兼容情况     


     


     

，至于如何解决兼容问题还得看下述的解决办法→

CSS兼容问题

1     

     

     
、不同浏览器的标签默认的内外边距不同

解决方案：*{margin: 0; padding: 0;}

其实清除浏览器自带的默认样式




 




 




，每个前端开发者所用的方法大同小异
   

   

  ，这里给出我选用的清除默认样式的重置样式代码：

/** * 该文件用于清除浏览器样式 / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { padding:0; margin:0; border:0; outline: 0; font-family: “Helvetica Neue For Number    
    
   ”, -apple-system, BlinkMacSystemFont, “Segoe UI     


     


     

”, Roboto, “PingFang SC




 




 




”, “Hiragino Sans GB
   

   

  ”, “Microsoft YaHei     

     

     
”, “Helvetica Neue 




  




  




”, Helvetica, Arial, sans-serif; word-wrap:break-word; } html, body { width: 100%; height: 100%; } a{ text-decoration: none; -webkit-tap-highlight-color:rgba(255,255,255,0); } ul,ol{ list-style-type: none; } textarea { resize: none; } /去除input button默认样式/ input,button,textarea { -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 225, 225, 0); padding: 0; border: 0; outline: 0; } // 修改placeholder属性默认文字颜色 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { / WebKit browsers / color: #999; } input:-moz-placeholder, textarea:-moz-placeholder { / Mozilla Firefox 4 to 18 / color: #999; } input::-moz-placeholder, textarea::-moz-placeholder { / Mozilla Firefox 19+ / color: #999; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { / Internet Explorer 10+ */ color: #999; }

除了自己定义清除默认样式的代码     

     

     
，也可选择引用别人写好的成熟插件Normalize.css来清除默认样式；

2 




  




  




、图片加a标签在IE9中会有边框

解决方案：img{border: none;}

3

  


  


 、IE6及更低版本浮动元素 




  




  




，浮动边双倍边距

解决方案：不使用margin 

  


  


 ，使用 padding

4     
     
     、IE6及更低版本中     
     
     ，部分块元素拥有默认高度

解决方案：给元素设置font-size: 0;

5  




   




   




、a标签蓝色边框

解决方案：a{outline: none;}

6


 



 



、IE6不支持min-height属性

解决方案：{min-height: 200px; _height: 350px;}

7               、IE9以下浏览器不能使用opacity

解决方案：Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter

opacity: 0.7; /FF chrome safari opera/ filter: alpha(opacity:70); /用了ie滤镜,可以兼容ie/

8   




    




    



、IE6/7不支持display:inline-block

解决方案：{display: inline-block; *display: inline;}

9













、cursor兼容问题

解决方案：统一使用{cursor: pointer;}

10              、IE6/7中img标签与文字放一起时  




   




   




，line-height失效的问题

解决方案：文字和 都设置 float

11    



     



     


、table宽度固定


 



 



，td自动换行

解决方案：table设置 {table-layout: fixed}                ，td设置 {word-wrap: break-word}

12














、相邻元素设置margin边距时   




    




    



，margin将取最大值













，舍弃小值

解决方案：不让边距重叠              ，可以给子元素加一个父元素    



     



     


，并设置该父元素设置：{overflow: hidden}

13    
    
   、a标签css状态的顺序

解决方案：按照link–visited–hover–active 的顺序编写

14     


     


     

、IE6/7图片下面有空隙的问题

解决方案：img{display: block;}

15




 




 




、ul标签在Firefox中默认是有padding值的














，而在IE中只有margin有值

解决方案：ul{margin: 0;padding: 0;}

16
   

   

  、IE中li指定高度后    
    
   ，出现排版错误

解决方案：设置line-height

17     

     

     
、ul或li浮动后     


     


     

，显示在div外

解决方案：清除浮动；须在ul标签后加

来闭合外层div

18 




  




  




、ul设置float后




 




 




，在IE中margin将变大

解决方案：ul{display: inline;}
   

   

  ， li{list-style-position: outside;}

19

  


  


 、li中内容超过长度时     

     

     
，用省略号显示

li{ width: 200px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; }

20     
     
     、div嵌套p时 




  




  




，出现空白行

解决方案：li{display: inline;}

21  




   




   




、IE6默认div高度为一个字体显示的高度

解决方案：{line-height: 1px;} 或 {overflow: hidden;}

22


 



 



、在Chrome中字体不能小于10px

解决方案：p{font-size: 12px; transform: scale(0.8);}

23               、谷歌浏览器上记住密码后输入框背景色为黄色

input{ background-color: transparent !important; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-text-fill-color: #333 !important; -webkit-box-shadow: 0 0 0 1000px transparent inset !important; background-color: transparent !important; background-image: none !important; transition: background-color 5000s ease-in-out 0s; }

24   




    




    



、CSS3兼容前缀表示

写法 内核 浏览器

-webkit- webkit渲染引擎 chrome/safari

-moz- gecko渲染引擎 Firefox

-ms- trident渲染引擎 IE

-o- opeck渲染引擎 Opera

如：

.box{ height: 40px; background-color: red; color: #fff; -webkit-border-radius: 5px; // chrome/safari -moz-border-radius: 5px; // Firefox -ms-border-radius: 5px; // IE -o-border-radius: 5px; // Opera border-radius: 5px; }

JS兼容问题

1













、事件对象的兼容

e = ev || window.event

2              、滚动事件的兼容

scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

3    



     



     


、阻止冒泡的兼容

if (e.stopPropagation) { e.stopPropagation; } else { e.cancelBubble=true; }

4














、阻止默认行为的兼容

if (e.preventDefault) { e.preventDefault; } else { e.returnValue = false; }

5    
    
   、添加事件监听器的兼容

if (target.addEventListener) { target.addEventListener(“click

  


  


 ”, fun, false); } else { target.attachEvent(“onclick     
     
     ”, fun); }

6     


     


     

、ajax创建对象的兼容

var xhr = null； if (window.) { xhr = new ; } else { xhr = new ActiveXObject(“Microsoft XMLHTTP  




   




   




”); }

7




 




 




、鼠标按键编码的兼容

function mouse (ev) { var e = ev || window.event; if (evt) { return e.button; } else if (window.event) { switch (e.button) { case 1: return 0; case 4: return 1; case 2: return 2; } } }

8
   

   

  、在IE中

  


  


 ，event对象有x     
     
     ，y属性  




   




   




，Firefox中与event.x等效的是event.pageX


 



 



，而event.pageX在IE中又没有

x = event.x ? event.x : event.pageX;

9     

     

     
、在IE下               ，event对象有srcElement属性   




    




    



，但是没有target属性；Firefox下













，event对象有target属性              ，但是没有srcElement属性

var source = ev.target || ev.srcElement; var target = ev.relatedTarget || ev.toElement;

10 




  




  




、在Firefox下需要用CSS禁止选取网页内容    



     



     


，在IE用JS禁止

-moz-user-select: none; // Firefox obj.onselectstart = function {return false;} // IE

11

  


  


 、innerText在IE中能正常工作














，但在FireFox中却不行

if (navigator.appName.indexOf(“Explorer


 



 



”) > -1) { document.getElementById(‘element’).innerText = “IE               ”; } else { document.getElementById(‘element’).textContent = “Firefox   




    




    



”; }

12     
     
     、在Firefox下    
    
   ，可以使用const关键字或var关键字来定义常量；在IE下     


     


     

，只能使用var关键字来定义常量

解决方案：统一使用var 关键字来定义常量

移动端兼容问题

解决方案：

2  




   




   




、禁止iOS弹出各种操作窗口

解决方案：-webkit-touch-callout:none

解决方案：

4


 



 



、禁止iOS和Android用户选中文字

解决方案：-webkit-user-select:none

5               、iOS下取消input在输入的时候英文首字母的默认大写

解决方案：

6   




    




    



、Android下取消输入语音按钮

解决方案：input::-webkit-input-speech-button {display: none}

7













、在移动端修改难看的点击的高亮效果




 




 




，iOS和安卓下都有效

解决方案：* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

8              、iOS下input为type=button属性disabled设置true
   

   

  ，会出现样式文字和背景异常问题

解决方案：使用opacity=1;

9    



     



     


、input为fixed定位     

     

     
，在iOS下input固定定位在顶部或者底部 




  




  




，在页面滚动一些距离后

  


  


 ，点击input(弹出键盘)     
     
     ，input位置会出现在中间位置

解决方案：内容列表框也是fixed定位  




   




   




，这样不会出现fixed错位的问题

10














、移动端字体小于12px使用四周边框或者背景色块


 



 



，部分安卓文字偏上bug问题

解决方案：可以使用整体放大1倍(width    
    
   、height     


     


     

、font-size等等)               ，再使用transform缩放

11




 




 




、在移动端图片上传图片兼容低端机的问题

解决方案：input 加入属性accept=“image/*













” multiple

12
   

   

  、在Android上placeholder文字设置行高会偏上

解决方案：input有placeholder情况下不要设置行高

13     

     

     
、overflow: scroll或auto；在iOS上滑动卡顿的问题

解决方案:加入-webkit-overflow-scrolling: touch;

14 




  




  




、iOS中日期如：2022-02-22 00:00:00格式的时间转时间戳不成功

解决方案：需要将时间中的’00:00:00去除之后才能转为时间戳’

15

  


  


 、iOS中需要将时间格式转为/   




    




    



，如：2022/02/22

let date = ‘2022-02-22’; let dateStr = date.replace(/-/g, ‘/’); // 2022/02/22

16     
     
     、移动端click300ms延时响应

解决方案：使用Fastclick

window.addEventListener( “load              ”, function { FastClick.attach( document.body ); }, false );

17  




   




   




、移动端1px边框问题

解决方案：原先元素的border去掉













，然后利用:before或者:after重做border              ，并transform的scale缩小一半    



     



     


，原先的元素相对定位














，新做的border绝对定位

.border-1px{ position: relative; border:none; }

.border-1px:after{content: ‘’;position: absolute; bottom: 0;background: #000;width: 100%; height: 1px;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0; }

1.浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同

问题症状：随便写几个标签    
    
   ，不加样式控制的情况下     


     


     

，各自的margin 和padding差异较大



     



     



    。

碰到频率:100%

解决方案一：

可以使用normalize.css来清除默认样式

解决方案二：也可以使用如下代码：

body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }

解决方案三：使用(通配符)设置*：

*{ margin:0; padding:0; }

2. 浏览器兼容问题二：

我们常用的div布局




 




 




，div是块级元素
   

   

  ，横向布局的时候我们通常都是用div float实现的     

     

     
，横向的间距设置如果用margin实现 




  




  




，这就是一个必然会碰到的兼容性问题: 在IE6显示margin比设置的大,常见症状是IE6中后面的一块被顶到下一行












。

碰到频率：90%（稍微复杂点的页面都会碰到

  


  


 ，float布局最常见的浏览器兼容问题）

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

3. 浏览器兼容问题三：

元素的高度设置若小于10px的话     
     
     ，IE6


 



 



、IE7这个标签的高度不受控制  




   




   




，超出自己设置的高度

碰到频率：60%

问题出现的原因：IE8之前的浏览器都会给标签一个最小默认的行高的高度    
    
    
。即使你的标签是空的


 



 



，这个标签的高度还是会达到默认的行高


     


     


   。

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度
 




 




 

。

4. 浏览器兼容问题四：行内属性标签               ，设置display:block后采用float布局   




    




    



，又有横行的margin的情况













，IE6间距bug

碰到频率：20%

问题出现的原因：行内属性标签              ，为了设置宽高    



     



     


，我们需要设置display:block;(除了input标签比较特殊)   

   

   

。在用float布局并有横向的margin后














，在IE6下    
    
   ，他就具有了块属性float后的横向margin的bug 

     

     

  。不过因为它本身就是行内属性标签     


     


     

，所以我们再加上display:inline的话




 




 




，它的高宽就不可设了

  




  




  
。这时候我们还需要在display:inline后面加入display:talbe  


  


  


。

解决方案：添加两句话display:inline；display:talbe；

5. 浏览器兼容问题五：几个img标签放在一起的时候
   

   

  ，图片默认有间距     

     

     
，使用通配符设置margin,padding为零也不能解决此问题  
     
     
 。

碰到频率：20%

问题出现的原因：部分浏览器的img标签之间会有个间距

解决方案：使用float属性为img布局


   




   




   。使用负margin 




  




  




，虽然能解决

  


  


 ，但负margin本身就是容易引起浏览器兼容问题的用法     
     
     ，故不推荐此方法 



 



 



。

6. 浏览器兼容问题六：标签最低高度设置min-height不兼容问题

碰到频率：5%

问题出现的原因：             。当内容小于一个值（如300px）时



    




    




    。容器的高度为300px；当内容高度大于这个值时  




   




   




，容器高度被撑高


 



 



，而不是出现滚动条













。这时候我们就会面临这个兼容性问题

解决方案：如果我们要设置一个标签的最小高度200px               ，需要进行的设置为：{min-height:200px; height:auto !ImportAnt; height:200px; overflow:visible;}

7. 浏览器兼容问题七：标签最低高度设置min-height不兼容问题

碰到频率：5%

问题出现的原因：              。当内容小于一个值（如300px）时



     



     



    。容器的高度为300px；当内容高度大于这个值时   




    




    



，容器高度被撑高













，而不是出现滚动条












。这时候我们就会面临这个兼容性问题

解决方案：如果我们要设置一个标签的最小高度200px              ，需要进行的设置为：{min-height:200px; height:auto !ImportAnt; height:200px; overflow:visible;}

8. 浏览器兼容问题八：透明度属性

问题出现的原因：针对IE浏览器

解决方案：IE浏览器：filter：alpha（opacity=value）；（取值范围1–100）,兼容其他浏览器：opacity：value；（取值范围0–1）

Alpha：设置透明度

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity：透明度级别    



     



     


，范围是0-100














，0代表完全透明    
    
   ，100代表完全不透明    
    
    
。

FinishOpacity：设置渐变的透明效果时     


     


     

，用来指定结束时的透明度




 




 




，范围也是0 到 100


     


     


   。

Style：设置渐变透明的样式
   

   

  ，值为0代表统一形状               、1代表线形   




    




    



、2代表放射状













、3代表长方形
 




 




 

。

StartX和StartY：代表渐变透明效果的开始X和Y坐标   

   

   

。

FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标 

     

     

  。

9. 浏览器兼容问题九：按钮默认大小不一

解决方案：

1）用a标签来模拟按钮     

     

     
，添加样式；

2）如果按钮是一张背景图片 




  




  




，那么直接给按钮添加背景图；

10. 浏览器兼容：

解决方案：hacker解决不兼容问题

IE6认识的hacker 是下划线_ 和星号 *

IE7 认识的hacker是星号 *

所有浏览器 通用

height: 100px;

IE6 专用

_height: 100px;

IE6 专用

*height: 100px;

IE7 专用

*+height: 100px;

IE7              、FF 共用

height: 100px !important;

11. 其他兼容技巧

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)

2, 居中问题.

1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.)

2).水平居中. margin: 0 auto;(当然不是万能)

3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)

4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.

5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

7, 关于手形光标. cursor: pointer. 而hand只适用于 IE.