常见的几种浏览器兼容性问题和解决方案

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

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


浏览器兼容问题二: IE6 的横向margin加倍

产生原因:块属性 float 有横向margin

解决方案:display:inline;


浏览器兼容问题三IE6
下有默认的行高

解决方案:overflow:hidden
或者用font-size:0   line-height: xxpx;


浏览器兼容问题四在各浏览器下img有间隙

解决方案:float
 浮动;


浏览器兼容问题五IE6
不识别最大宽度和最小高度 意味min-width/height 和Max-width/height 在IE6中没效果

解决方案(1):.abc{border:1px
blue solid;width:200px;height:200px;}

 html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}

(2):.abc{width:200px;height:200px;_width:200px;_height:200px;}(因为ie6有一个特征,当定义一个高度时,如果内容超过高度,元素会自动调整高度。)


浏览器兼容问题六li之间的间距

解决方案:li 设置 vertical-align:middle;


浏览器兼容问题七:优先级!important  在IE6中!important
具有bug 在同一组属性中 !important 起不了作用

浏览器兼容问题八:IE6
不支持 fixed

/*对于非IE6可以这样写*/
#top{  
    position:fixed;  
    bottom:0;  
    right:20px;  
}  

/*但是IE6是不支持fixed定位的,需要另外重写*/
#top{  
    position:fixed;  
    _position:absolute;  
    top:0;  
    right:20px;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop));
}  

/*使用hack使IE6实现该效果,但这个东东会闪烁,需要以下代码*/
*html{  
    background-image:url(about:blank);  
    background-attachment:fixed;  
}  

/*使固定在顶部*/
#top{  
    _position:absolute;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop));  
}  

/*固定在底部*/
#top{  
    _position:absolute;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));  
}  
/*垂直居中*/
#top{
    position:fixed;
    top:50%;
    margin-top:-50px;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2)); 
}

浏览器兼容问题九:解决IE6 最大 最小宽高hack方法

/* 最小宽度 */
.min_width{
    min-width:300px;
    _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}

/* 最大宽度 */
.max_width{
   max-width:600px;
   _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}

/* 最小高度 */
.min_height{
   min-height:200px;
   _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}

/* 最大高度 */
.max_height{
   max-height:400px;
   _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}

浏览器兼容问题十:z-index 不起用作的bug

解决方案:当父标签属性为relative或absolute时,子标签的absolute属性是相对于父标签而言的。而在IE6下,层级的表现有时候不是看子标签的z-index多高,而要看它们的父标签的z-index谁高谁低。


浏览器兼容问题十一:IE
各版本的hack

/*类内部hack:*/
    .header {_width:100px;}            /* IE6专用*/
    .header {*+width:100px;}        /* IE7专用*/
    .header {*width:100px;}            /* IE6、IE7共用*/
    .header {width:100px;}        /* IE8、IE9共用*/
    .header {width:100px9;}        /* IE6、IE7、IE8、IE9共用*/
    .header {width:330px9;}    /* IE9专用*/

/*选择器Hack:*/
    *html .header{}        /*IE6*/ 
    *+html .header{}    /*IE7*/


IT文库 » 常见的几种浏览器兼容性问题和解决方案
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址