浏览器兼容问题及解决方案（一）

参考网址：http://caniuse.com/

css模块

---

一、CSS Hack

根据不同浏览器对CSS的支持与解析结果不一致以及CSS中的优先级关系，将CSS Hack分为三种表现形式。

• CSS类内部Hack

        ​比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识

IE浏览器属性查找表如下：

！important

• 选择器Hack

       比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}

*html    *前缀只对IE6生效

*+html    *+前缀只对IE7生效

@media screen\9{...}  只对IE6/7生效

@media \0screen {body { background: red; }}  只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}  只对IE6/7/8有效

@media screen\0 {body { background: green; }}  只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }}  只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }}  只对IE10有效等等

• HTML头部引用（if IE）

      针对所有IE：<!--[if IE]><!--IE可用--><![endif]-->，

      针对IE6及以下版本：<!--[if lt IE 7]><!--IE6及以下版本可用--><![endif]-->，

      这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

      缺点：在IE浏览器下可能会增加额外的HTTP请求数。

举例说明：

width:20px; *width:25px; _width:30px;

IE7和遨游会从width:20px;往下读，但在*width:25px;就停下来了，因为它们不识别_width,因此宽度设置为25px；IE6从width:20px;往下读，读到*width:25px;它也认识会覆盖掉前一条互相冲突的设置，继续往下读到_width:30px;，它也认识，继续覆盖前面的宽度，把宽度设置为30px

注意：

1、不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

2、IE6支持下划线，IE7和firefox均不支持下划线

二、IE6 的 特殊CSS样式

1、IE6块级元素设置float后，再设置横向margin，margin加倍

——解决方案：将该块级元素设置样式 ： display:inline

2、IE6默认有行高

——解决方案：overflow:hidden; 或者 font-size:0; 或者重置行高

3、IE6 中如果为 li 标签 设置宽高，并且li 里面的标签设置浮动，li 之间会有间距

——解决方案：li 不设置宽高；或者li 里面的标签不设置浮动

4、三像素问题。当浮动元素（float）与流动元素并列显示时，会出现三像素问题

——解决方案1：用hack技术，所有浏览器通用设置 height:100px; ie6 专用 _height:100px; ie7专用*+height:100px; ie6/ie7共用*height:100px;

——解决方案2：dislpay:inline -3px

5、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)); 
}

6、IE6设置最小，最大宽高无效

——解决方案1

/* 最小宽度 */
.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);
}

——解决方案2：设置一个标签的最小高度为200px

{min-height:200px; height:auto !important; height:200px; overflow:visible;}

7、IE6下 z-index 失效

——产生的原因：父标签 position:relative;  或者问题标签含有浮动 (float) 的属性

——解决方案：设置子标签的 z-index，还要设置父标签的 z-index，从而确定子标签的层级顺序

8、IE6各个版本的hack

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

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

9、！important （注明CSS属性具有最高优先级），然而IE6 不支持该属性

10、IE6中 图片产生空隙 

——解决方案： 为 img 标签设置 display:block; 或者 vertical - align: top | bottom |middle |text-bottom 

11、IE6下无法定义1px高度的容器

——解决方案：overflow:hidden | zoom:0.08 | line-height:1px

12、png24为的图片在iE6浏览器上出现背景

——解决方案：做成PNG8.

三、其他常见的CSS样式

1、opacity 定义元素的不透明度

——解决方案：filter : alpha ( opacity=80 ) ;/* ie 支持的属性*/   opacity:0.8 /* 支持CSS3的浏览器*/

2、li 中内容超过长度后，以省略号显示的方法，适用与 IE 与 Opera 

——解决方案：  li : { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden }

2、Firefox 不识别 background-position-y 与 background-position-x

3、不同浏览器默认的外边距与内边距不同

——解决方案：添加样式  *{ margin : 9; padding : 0; }

4、IE6、IE7、遨游浏览器里 若为标签设置高度小于 10px，高度是不受控制的

——解决方案：给超出高度的标签设置  overflow : hidden; 或设置 line-hight 的值，小于标签的高度

5、DIV居中（其他浏览器： margin:0 auto），IE不可以

——解决方案：body居中，父级元素定义 text-align:center

6、游标手指cursor ,IE与 Firefox cursor:pointer，IE中 cursor:hand

7、ul 标签 在 IE 的 margin 默认有值，而在 Firefox 的 padding 默认有值；form 标签 在IE中 margin 默认有值

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

8、盒模型解释不一致

——解决方案：

div{maring:30px;margin:28px} /*重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important; */   
#box{
 width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}    
#box{ 
width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-} 

9.IE6不支持PNG透明背景

——解决方案：IE6下使用gif图片

10、获取自定义属性，Firefox 只能用 getAttribute() 获取自定义属性，IE 使用常规获取自定义属性的方法

——解决方案：都使用 getAttribute()

11、 IE下,even对象有x,y属性,但是没有pageX,pageY属性;      Firefox下,event对象有pageX,pageY属性,但是没有x,y属性

12、Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

——解决方案：可通过加入 CSS 属性 -webkit-text-size-adjust: none;

---

JavaScript模块

---

1、IE 和标准下 兼容性写法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

 2、兼容所有的浏览器，实现功能：清除字符串前后的空格

——解决方案：使用自带接口 trim() 

if (!String.prototype.trim) { 
 String.prototype.trim = function() { 
 return this.replace(/^\s+/, "").replace(/\s+$/,"");
 } 
} 

 3、FF 与 IE 脚本兼容问题

(1) window.event： 
表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象 

(2) 获取事件源 
IE用srcElement获取事件源，而FF用target获取事件源 

(3) 添加，去除事件 
IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function) 
FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true) 

(4) 获取标签的自定义属性 
IE：div1.value或div1[“value”] 
FF：可用div1.getAttribute(“value”) 

4、客户区大小

function getViewport() {
            if(document.compatMode == "CSS1Compat") {
                //标准模式
	    return {
                    clientWidth : document.documentElement.clientWidth,
                    clientHeight : document.documentElement.clientHeight
                }
            }else{
                //混杂模式
	    return {
                    clientWidth : document.body.clientWidth,
                    clientHeight : document.body.clientHeight
                }
            }
        }

---

主流浏览器CSS3 与 HTML5 兼容简述

---

一、CSS3属性

全部支持的是：Chrome，Safari，并且再MAC 、Windows 平台都支持

二、CSS3 选择器

除了IE家族和Firefox 3，其他几乎全部支持。Chrome，Safari，Firefox 3.6，Opera 10.5成绩最好。

三、HTML5 Web应用

Safari对HTML 5 Web应用的支持最好，除了地理定位功能，其它都支持。

四、HTML5 网页内嵌对象（内置画布，视频、音频）

全部支持的有Chrome，Safari，Firefox 3.6，Opera 10.5。IE家族则全军覆没。

五、音频编码

Opera 10.5支持的最全面，IE家族又是颗粒无收。

六、HTML5 视频编码

七、HTML5 各种表单对象

---

 

转载于:https://my.oschina.net/mikique/blog/709241