常见浏览器的兼容问题

 

　　初学html和css时，天天切图，总会遇到不少浏览器兼容性问题。最近一直关注移动平台开发，就html和css来讲，不用考虑那么多浏览器兼容性问题。到如今，以致于不少浏览器兼容性几乎忘光了。今天把之前总结的知识拿来分享一下，顺便本身也复习一下。固然，其中确定有不少不足，望指正啊。

 

1 ie6.0横向margin加倍

产生因素：块属性、float、有横向margin。

解决方法：display：inline；

2 ie6.0下默认有行高

解决方法：overflow:hidden;或font-size:0;或line-height：xx px；

3 在各个浏览器下img有空隙(缘由是：回车。)

解决方法:让图片浮动。

4 一个父标签与几个子标签嵌套，父标签不浮动，子标签float，子标签不撑开父的高度。

解决方法：a 在子标签最后清浮动{<div style="height:0;clear:both;">&nbsp;</div>}

                  b 父标签添加{overflow：hidden；}

                  c 给父标签设置高度

5 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有一个特征，当定义一个高度时，若是内容超太高度，元素会自动调整高度。）

6 Ie6里面：如li设宽、高，而且li里面的标签浮动，那么li之间会有间距

解决方法：li不设宽、高或者li内的标签不浮动

7  li之间有间距

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

8 3像素问题：ie6下，当浮动元素与流动元素并列显示时，他们之间会存在三像素问题。

   解决方法：用hack技术， 例如：全部浏览器通用 height:100px; 

                                                  ie6专用_height:100px;

                                                  ie7专用*+height:100px; 

                                                  ie6/ie7共用*height:100px;

9 当定义行内元素为包含框时，且包含框包含的绝对定位元素以百分比为单位进行定位时，会出现混乱。

    解决方法：在行内元素里加入{zoom：1；}

10 当多个浮动元素中间夹杂着HTML注释语句时，若是浮动元素宽度为100%，则在下一行多显示一个上一行最后一个字符。

        解决办法：给浮动元素添加display:inline;。

11 opacity 定义元素的不透明度

  filter：alpha（opacity=80）；/*ie支持该属性*/

  opacity：0.8；/*支持css3的浏览器*/

12 两个块元素，竖向的margin值不增长，会重叠，其间距为最大margin值。

13 优先级：被!important 注明的css属性具备最高优先级(.abc{color:red !important;})。但在ie6中!important具备一个bug:在同一组css属性中，!important不起做用。

14 火狐不识别background-position-y 或background-position-x;

 

---------------------------2014.01.10补充-------------------------------

15 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)); 
}

16  解决 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);
}

 

17  z-index不起做用的 bug

1）ie6下 首先讲讲第一种z-index不管设置多高都不起做用状况。这种状况发生的条件有三个：一、父标签position属性为relative；二、问题标签含有浮动(float)属性。
2）全部浏览器：它只认第一个爸爸
层级的高低不只要看本身，还要看本身的老爸这个后台是否够硬。用术语具体描述为：
父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

18  ie各个版本hack

/*类内部hack：*/
    .header {_width:100px;}            /* IE6专用*/
    .header {*+width:100px;}        /* IE7专用*/
    .header {*width:100px;}            /* IE六、IE7共用*/
    .header {width:100px\0;}        /* IE八、IE9共用*/
    .header {width:100px\9;}        /* IE六、IE七、IE八、IE9共用*/
    .header {width:330px\9\0;}    /* IE9专用*/

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

 

1.去掉iframe中横向的滚动条   

　　　　 解决办法：在加入iframe子页面中添加  html{overflow-x:hidden;}

　　2.ie6中position：fixed不兼容   

　　　　解决办法：  在固定定位的元素里。。加入*position：absolute；*top：值；*left：值；

　　3.ie中图片有边框  

　　　　解决方法：img{ border：none；}

　　4.ie中：hover兼容性问题   

　　　　 解决办法：只需引用一个文件就行：csshover3.htc（文件在桌面）；此文件必须和html文件在同一目录（要放在一个文件夹下面）；而后调用代码.放到　　　　　　            <head></head>中间:   <!--[if lte IE 6]>   <style type="text/css">   body { behavior:url("csshover3.htc"); }   </style>   <![endif]-->

　　5.IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block

 　　　　解决办法：div{display:inline-block;*display:inline;*zoom:1;}

　　6.display:inline-block后元素之间有小间距

 　　　　解决办法：能够将元素不换行书写（但可读性差）

　　7.文字贯穿线方法：1：使用html标签<s>111111111111</s>;2:text-decoration:line-through;

　　8.解决透明度兼容问题：

　　　　解决办法1:filter:alpha(opacity=90);opacity: .9;(主要针对ie)

      　　　　　　2:  filter:alpha(opacity=50);           -moz-opacity:0.5;          -khtml-opacity: 0.5;           opacity: 0.5;   

　　9.ie兼容border-radius问题：        

　　　　 解决办法1：如此在须要圆角的css中引用文件behavior: url("ie-css3.htc")，其中ie-css3.htc须要与html文件在同一目录下

　　　　　　　　　　#div1{border: 1px solid red;width: 200px;height: 200px;margin:20px; behavior: url("ie-css3.htc");

　　　　　　　　　　border-radius: 20px;position: relative;z-index: 1000;} <div id="div1"></div>  

　　　　解决办法2：引用PIE.htc同上；  

　　　　解决办法3：使用图片代替；

　　10.ie中a标签点击后虚线问题:  

　　　　解决办法：a{outline：none；border：none；}

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

　　　　解决办法：若是咱们要设置一个标签的最小高度200px，须要进行的设置为：{min-height:200px; height:auto !important; height:200px; 　　　　　　　　　　                          overflow:visible;}

　　12.还有一些页面在ie（6-8）下有微小的差距，这时我通常选用css hack来进行微调

　　　　

　　　　　　IE6：（只是ie6识别）

　　　　　　　　_selector{property:value;}

　　　　　　　　selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important

　　　　　　IE7：（只是ie7识别）

　　　　　　+selector{property:value;}

　　　　　　IE8：（只是ie8识别）

　　　　　　selector{property:value\0;}

　　　　　　IE6 & IE7：（只是ie6与ie7识别）

　　　　　　*selector{property:value;}

　　　　　　IE6 & IE7 & IE8：：（只是ie6，ie7，ie8识别）

　　　　　　selector{property:value\9;}

 

   解决浏览器兼容性问题，仍是从三个方面入手：html部分、css部分、js部分。       一、html部分       a、最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器没法识别的元素，从而致使不能解析。这点主要体如今html5的新标签上       解决办法是：htmlshim框架可让低于IE9的浏览器支持html5       b、img的alt属性，在图片不存在的状况下，各浏览器的解析不一致       在chrome下显示的是一张破损的图片，在ff下显示的是alt的文字，而在IE中显示的是破损的图片加文字       c、ul标签内外边距问题       ul标签在IE6\IE7中，有个默认的外边距，可是在IE8以上及其余浏览器中有个默认的内边距       二、css部分：       a、css的hack问题：主要针对IE的不一样版本，不一样的浏览器的写法不一样       IE的条件注释hack：       <!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->          <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->       b、IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍       解决办法：display:block;       c、IE6下图片的下方有空隙       解决方法：给img设置display:block;       d、IE6下两个float之间会有个3px的bug       解决办法：给右边的元素也设置float:left;       e、IE6下没有min-width的概念，其默认的width就是min-width       f、IE6下在使用margin:0 auto;没法使其居中       解决办法：为其父容器设置text-align:center;       g、 被点击事后的超连接再也不具备hover和active属性       解决办法:按lvha的顺序书写css样式       h、在使用绝对定位或者相对定位后，IE中设置z-index失效，缘由是由于其元素依赖于父元素的z-index，可是父元素默认为0， 子高父低，因此不会改变显示的顺序       i、IE6下没法设置1px的行高，缘由是由其默认行高引发的       解决办法：为期设置overflow:hidden;或者line-height:1px;       三、js部分       a、标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；       b、事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，可是最后的结果是将IE的标准定为标准       c、咱们常说的事件处理时的event属性，在标准浏览器其是传入的，IE下由window.event获取的。而且获取目标元素的方法也不一样，标准浏览器是event.target，而IE下是event.srcElement       d、在低版本的IE中获取的日期处理函数的值不是与1900的差值，可是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。          好比：var year= new Date().getYear();       e、ajax的实现方式不一样，这个我所理解的是获取XMLHttpRequest的不一样，IE下是activeXObject       f、IE中不能操做tr的innerHtml       g、得到DOM节点的父节点、子节点的方式不一样       其余浏览器：parentNode  parentNode.childNodes       IE：parentElement parentElement.children