前端浏览器兼容问题解决方案总结

Posted 2021-04-30 程序员Style

点击上方“ 程序员Style ”，星标公众号

   
     
     
   

    
      
      
    
 
     
 
      
 
       
 
        重磅干货，第一时间送达 
       
 
      
 
     
 
    
   
     
     
   
   
     
     
   

    
      
      
    
 
     
 
      
每日干货
 
     
 
    
    
      
      
    
 
     
 
     
 
    
   
     
     
   
   
     
     
   

    
      
      
    
 
     
 
      

 
      
 
       浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 
      
 
      

        问题症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。 
      
 
      

        解决方案：CSS里*{margin:0; padding:0;} 
       
备注:这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0； 
      
 
      
 
       
 
       浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 
       
问题症状：常见症状是IE6中后面的一块被顶到下一行 
      
 
      

        解决方案：在float的标签样式控制中加入display:inline;将其转化为行内属性 
       
备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用divfloat实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。 
      
 
      
 
       
 
       浏览器兼容问题三：设置较小高度标签(一般小于10px）,在IE6，IE7，高度超出自己设置的高度 
       
问题症状：IE6，7和遨游里这个标签的高度不受控制，超出自己设置的高度。 
       
解决方案：给超出高度的标签设置overflow：hidden；或者设置行高line-height小于你自己设置的高度。 
       
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。 
      
 
      
 
       
 
       浏览器兼容问题四：行内属性标签，设置display：block后采用float布局，又有横行的margin的情况，IE6间距BUG 
       
问题症状：IE6里的间距比超过设置的间距 
       
解决方案:在display:block;后面加入display:inline;display:table; 
       
备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊）。再用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的BUG。不过因为它本身家就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:table 
      
 
      
 
       
 
       浏览器兼容问题五:图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会默认的间距，加了问题一中提到的通配符也不起作用。 
       
解决方案：使用float属性为img布局 
       
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正确的（ps：不建议使用负margin,虽然能解决，但是负margin本身就是容易引起浏览器兼容问题的用法，所以禁止使用）。 
      
 
      
 
       
 
       浏览器兼容问题六：标签最低高度设置min-height不兼容 
       
问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容 
       
解决方案:如果我们要设置一个标签的最小高度200px，需要进行的设置为{min-height:200px;height:auto!important;height:200px;overflow:visible;} 
       
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。 
      
 
      
 
       
 
       浏览器兼容问题七：各种特殊样式的兼容，比如透明度、圆角、阴影等。 
      
 
      

        特殊样式每个浏览器的代码区别很大，所以，只能现查资料通过给不同浏览器写不同的代码来解决。 
       
做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。 
       
 
       
 
       浏览器兼容性问题八:字体大小定义不同 
      
 
      

        问题症状：对字体大小small定义不同，Firefox为13px，而IE为16px，差别比较大　 
       
解决方法：使用指定的字体大小如14px或者使用em 
       
 
       
 
       浏览器兼容性问题九：光标手形 
       
问题表现：firefox不支持hand，但ie支持pointer 
       
解决方案：统一使用cursor:pointer; 
       
 
      
 
       
      
 
      
 
      
 
       IE中的事件对象 
       
window.event 和 dom 中的事件对象做对比： 
       
几个重要的方法和属性分别是： 
       
（1）事件类型：同为type属性； 
       
（2）事件作用目标：ie为srcElement属性； 
       
（3）阻止事件冒泡：ie为canceBubble属性；（设置为ture为阻止冒泡，false为允许）； 
       
（4）阻止事件默认行为：ie为retureValue属性；（设置为ture为阻止，false是允许）； 
       
同样通过判断浏览器的能力来选择使用哪一个事件对象； 
       
event对象在ie中和其他浏览器也不同： 
       
在ie中直接用window.event; 
       
其他浏览器中必须通过参数把event传过来。 
       
FF没有window.event对象。可以通过给函数的参数传递event对象。 
       
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 
       
event对象只在事件发生的过程中才有效。 
       
event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 
       
 
       
firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。//event在ff中是临时变量，这表示可以换成任何其他符号 
       
在IE中可以运行，因为在函数中会有一个内置的event隐藏对象。 
       
但是在Firefox中,则内置event变量为空 
       
 
      
 
      
 
       
 
        
 
        
 
        
 
        
 
        
 
        
 
        
 
        
 
        
 
        
 
       
 
       
[javascript] view plain copy<input type="button" onmousemove="showDiv(event);"//event不需要加引号 function showDiv(event) {  var event=window.event||event;  event.clientX;  event.clientY; }
setAttribute('style','color:red;')
 
      
 
      

        FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持 
       
解决办法：不用setAttribute('style','color:red') 
       
而用object.style.cssText = ‘color:red;'(这写法也有例外) 
       
最好的办法是上面种方法都用上，万无一失 
      
 
      
 
       
 
       类名设置 
       
setAttribute('class','styleClass') 
       
FIREFOX支持，IE不支持(指定属性名为class，IE不会设置元素的class属性，相反只使用setAttribute时IE自动识CLASSNAME属性) 
       
解决办法： 
       
 
      
 
      
 
       
 
        
 
        
 
        
 
       
 
       
setAttribute('class','styleClass')
setAttribute('className','styleClass')
 
      
 
      

        或者直接 object.className='styleClass'; 
       
IE和FF都支持object.className。 
       
 
      
 
       
      
 
       建立单选钮 
       
IE以外的浏览器 
       
 
      
 
      
 
       
 
        
 
        
 
        
 
        
 
       
 
       
var rdo = document.createElement('input');rdo.setAttribute('type','radio');rdo.setAttribute('name','radiobtn');rdo.setAttribute('value','checked');
 
      
 
      

        IE: 
       
 
      
 
      
 
       
 
        
 
       
 
       
var rdo =document.createElement(”<input name=”radiobtn” type=”radio” value=”checked” />”);
 
      
 
      

        解决办法： 
       
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了 
       
万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。 
      
 
     
 
    
   
     
     
   

如有收获，点个【在看】