浏览器兼容性问题的总结

原创

fengGer的bugs 2021-11-17 14:55:09 博主文章分类：兼容性 ©著作权

文章标签 浏览器的兼容性解决方案 css 解决方法自定义属性 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者fengGer的bugs的原创作品，请联系作者获取转载授权，否则将追究法律责任

浏览器兼容问题之总结

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

发生概率：100%

解决方案：使用CSS通配符*，设置内外补丁为0

*{ margin: 0; padding: 0;}

块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug）

发生概率：90%

解决方案：在float标签样式控制中加入display:inline;

设置较小的高度标签（一般小于10px），在IE6，IE7，遨游中超出自己设置的高度

发生概率：60%

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

行内标签设置display:block;后又采用float布局，再设置横向margin值时，在IE6中显示会比设置的大（IE6双边距bug）

发生概率：20%

解决方案：在display:block;后面加上display:inline;display:table;

图片默认有间距

发生概率：20%

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

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

发生概率：5%

解决方案：例如要设置一个标签的最小高度为200px

{ min-height: 200px;

height: auto!important;

height: 200px;

overflow: visible;}

透明度兼容设置

发生概率：主要看你要写的东西设不设透明度

解决方案：

transparent_class {   
    filter:alpha(opacity=50);   
       -moz-opacity:0.5;   
       -khtml-opacity: 0.5;   
       opacity: 0.5;   
 }

Box Model的bug

描述：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。

解决办法：在需要加 margin和padding的div内部加一个div,在这个div里设置margin和padding值。

IE6中的列表li楼梯状bug

描述：通常在li中的元素（比如a）设置了浮动float，但li本身不浮动。

解决办法：

ul li{float:left;}

或 ul li{display:inline;}

10.li空白间距

描述：在IE下，会增加li和li之间的垂直间距

解决办法：给li里的a显式的添加宽度或者高度

li a{width:20px;}

或者

li a{display:block;float:left;clear:left;}

或者

li {display:inline;}

li a{display:block;}

或者

在每个列表li上设置一个实线的底边，颜色和li的背景色相同

11.overflow：auto;和position:relative的碰撞

描述：此bug只出现在IE6和IE7中，有两个块级元素，父元素设置了overflow：auto;子元素设置了position:relative;且高度大于父元素，在IE6-7中子元素不会被隐藏而是溢出。

解决方案：给父元素也设置position:relative;

12.浮动层的错位

描述：当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。

解决方案：overflow：hidden;

13.IE6克隆文本的bug

描述：若你的代码结构如下

<!--这是注释-->

    <div>
      ……
   </div>

<!--这是注释-->

很有可能在IE6网页上出现一段空白文本

解决方案：

使用条件注释

删除所有注释

在注释前面的那个浮动元素加上 display：inline；

14.IE的图片缩放

描述：图片在IE下缩放有时会影响其质量

解决方案：img{ -mg-interpolation-mode:bicubic;}

15.IE6下png图片的透明bug

描述：使用透明图片,使用png24或png32图片在IE6下面显示图片会有一层淡蓝色的背景。

解决方案：


.img{
background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}
img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}
或
<imgsrc="test.png" width="247" height="216" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');" alt="" />

iframe 透明背景bug
描述：在IE浏览器中，iframe框架不会自动把背景设为透明
解决方法：

 <iframesrc="content.html"allowTransparency="true"></iframe>

   在iframe调用的content.html页面中设置

   body{background-color: transparent;}

禁用IE默认的垂直滚动条：
解决方法: html{ overflow:auto;}
浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？

* IE 浏览器的内核 Trident、Mozilla 的 Gecko、 google 的 WebKit、 Opera 内核 Presto；
* png24 为的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.
* 浏 览 器 默 认 的 margin 和 padding 不 同 。 解 决 方 案 是 加 一 个 全 局 的
*{margin:0;padding:0;}来统一。
* IE6 双边距 bug:块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin
比设置的大。
浮动 ie 产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 —
—_display:inline;将其转化为行内属性。(_这个符号只有 ie6 会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将 IE 游览器从所有情况中分离出来。
接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。
css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8 识别*/
+background-color:#a200ff;/*IE6、7 识别*/
_background-color:#1e0bd1;/*IE6 识别*/
}
* IE 下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用 getAttribute()获取自定义属性;
Firefox 下,只能使用 getAttribute()获取自定义属性.
解决方法:统一通过 getAttribute()获取自定义属性.
* IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性;
Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性.
* （条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入
CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和
active 了解决方法是改变 CSS 属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

js中的浏览器兼容：

（1）在获取DOM节点时高版本浏览器和低版本浏览器之间存在兼容问题；在高版本的浏览器中只是获取节点，会忽略文本内容，而在低版本的浏览器中在获取节点时会包含文本节点；

（2）事件对象：在IE浏览器中事件对象是window对象的一个属性event，并事件对象只能在事件发生时被访问，所有事件处理完后，该对象就消失了。在标准的DOM中规定事件处理函数的第一个参数为事件对象；

（3）在IE中，事件的对象包含在event的srcElement属性中，在标准的DOM浏览器中，对象包含在target属性中

（4）在IE中取消事件传递（阻止冒泡）的方法为：window.event.cancelBubble=true;在非IE中取消事件传递（停止捕捉）的方法为stopPropagation();

（5）获取style CSS内联样式属性值

//var w = window.getComputedStyle(box,null).width; //标准
//var h = box.currentStyle[“height”]; //IE8及以下的处理方式
function getStyle(dom,propertyName){
if(dom.currentStyle){
return dom.currentStyle[propertyName];
}else{
return getComputedStyle(dom,null)[propertyName];
}
}

（6）事件监听

标准: addElementListener(“click”,function(){},false);
IE：attachEvent(“onclick”,function(){});
function addEvent(dom,type,fn){
if(dom.addEventListener){
dom.addEventListener(type,fn);
}else{
dom.attachEvent(“on” + type,fn);
}
 }