设置浏览器兼容

浏览器兼容

css兼容

1. cursor定义手型
    Firefox不支持hand，IE支持pointer
    解决方法：统一使用pointer
2. css透明
    IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
    Firefox：opacity：0.6
    解决方法：1.使用background:rgba(0,0,0,0.6) IE8及以下无效
         2.使用定位，背景色与子元素处于同级关系
3. width和padding
    IE7和Firefox中宽度不包括padding，IE6中包括padding
4. 盒模型的区别（Firefox和IE）
    box.style{width:100px;border:1px}
    IE：box.width = 100px
    Firefox：box.width = 100 + 1*2 = 102(加边框)
    解决方法：div{margin:30px!important;margin:28px}(不可写反)
    原因：IE不能识别!important，解析结果为div{marign:30px;margin:28px}
5. 盒模型区别（IE5和IE6）
    IE5下div{width:200px;margin:0 10px}
    div宽度被解析为200（总宽度） - 10（左填充） - 10（右填充）
    IE6及其他浏览器被解析为 200 + 10 + 10
    解决方法：div{width:200px!important;width:240px;margin:0 10px}
6. ul和ol列表缩进问题
    IE：设置margin：0px可以去除列表上下左右缩进、空白、列表编号和圆点，padding无效果
    Firefox：设置margin：0px去除上下空白，padding：0px去除左右缩进，list-style：none去除编号和圆点
    解决方法：统一设置list-style：none;margin:0;padding:0;
7. 元素水平居中问题
    IE：设置父级{text-align:center}
    Firefox：margin:0 auto
    解决方法：同时设置父级和自身属性
8. div实现垂直居中
    vertical-align:middle; line-height:(父级高度)
    缺点：需要控制内容不换行
9. margin加倍的问题
    设置为float的div在IE下设置的margin会加倍
    解决方法：设置display:inline
10. IE的宽高问题
     IE没有min-width和min-height的属性
     解决方法：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto;min-width: 80px; min-height: 35px;}
11. 页面的最小宽度
     IE不识别min
     解决方法：1.#container{ min-width: 600px; width:expression(document.body.clientWidth＜ 600? “600px”: “auto” );}
          2.使用js判断实现最小宽度
12. div浮动IE产生3px的间距
     左边对象浮动，右边采用外补丁的左边距定位，右边对象内的文本会离左边有3px的间距
     解决方法：左边对象设置margin-right:-3px
13. 对齐文本与文本输入框
     vertical-align:middle(除了IE，其他都适用)
14. li内容过长后使用省略号代替
     li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;}
     (除了Firefox，其他都适用)
15. web标准中IE无法设置滚动条颜色的问题
     解决方法：使用html替换body
16. 无法定义1px高度的容器
     原因：IE6下因为默认的行高造成的
     解决方法：overflow:hidden/zoom:0.08/line-height:1px
17. 设置层显示在flash之上
     解决方法：将flash设置透明
     写法：<param name="vmode" value="transparent" />
18. 超链接（a标签）设置边框和背景
     解决方法：设置display:block,float:left保证不换行
19. 超链接（a标签）访问后hover样式消失问题
     解决方法：修改顺序 L-V-H-A
     书写方式：a:link{} -> a:visited{} -> a:hover{} -> a:active{}
20. form标签
     IE：自动添加margin
     Firefox： margin：0
     解决方法：设置margin和padding ul,form{margin:0;padding:0}
21. 属性选择器（css隐藏bug）
     p[id]{} div[id]{}
     p[id]属性选择器，所有p标签带有id的都是同样式
22. Firefox文本无法撑开容器高度(实现固定高度允许被撑开)
     标准浏览器：固定高度值不会被撑开
     IE：固定高度值可以被撑开
     解决方法：div{height:100px!important;height:100px;min-height:100px;}
23. Firefox和IE对空格尺寸的解释
     Firefox：空格尺寸4px ；忽略div与div之间的空格
     IE：空格尺寸8px ；不会忽略div与div之间的空格
24. 条件注释

    <link rel="stylesheet" type="text/css" href="css.css" />
    <!--[if IE 7]> 兼容IE7
    <link rel="stylesheet" type="text/css" href="ie7.css" />
    <![endif]-->
    <!--[if lte IE 6]>兼容IE6及以下
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->
    lte -- 小于等于
    lt  -- 小于
    gte --  大于等于
    gt  --  大于
    ！ --  不等于  
    

25. 强制渲染

    <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>//这句话的意思是强制使用IE7模式来解析网页代码！  
    <meta http-equiv=“X-UA-Compatible” content=“IE=8″>  
    <meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />//Google Chrome Frame也可以让IE用上Chrome的引擎  
    <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!– IE7 mode –> 或者  
    <meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –>//强制IE8使用IE7模式来解析  
    <meta http-equiv=“X-UA-Compatible” content=“IE=6″><!– IE6 mode –>  
    <meta http-equiv=“X-UA-Compatible” content=“IE=5″><!– IE5 mode –>//强制IE8使用IE6或IE5模式来解析  
    <meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″ />//一个特定版本的IE支持所要求的兼容性模式多于一种  
    

26. 字体大小定义不同
     问题症状：对字体大小small定义不同，Firefox为13px，而IE为16px，差别比较大　
     解决方法：使用指定的字体大小如14px或者使用em
    js兼容

---

1. HTML获取节点问题
    fireFox：document.getElementById(‘idName’)
    IE：document.getElementById(‘idName’) / document.idName
    解决方法：统一使用document.getElementById(‘idName’)
2. 变量名声明问题
    FireFox：const、var、let
    IE：var
    解决方法：统一使用var
3. event.x与event.y问题
    IE：event对象有x、y属性，没有pageX、pageY属性
    FireFox：event对象有pageX、pageY属性,没有x、y属性
    解决方法：使用mX(mX = event.x?event.x:event.pageX)替代属性
4. window.location.href问题
    IE、FireFox2.0x可以使用window.location和window.location.href属性
    Firefox1.5x及以下只能使用window.location
    解决方法：统一使用window.location.href
5. frame问题
    (1)访问frame对象
    统一写法：window.document.getElementById(‘frameId’)
    (2)切换frame内容
    统一写法：1. window.document.getElementById(‘frameId’).src = url
         2.window.frameName.location = url
    传递参数（子传父）：使用parent属性
6. 模态和非模态窗口问题
    IE：showModalDialog（打开模态窗口）、showModelessDialog(打开非模态窗口)，FireFox不支持
    解决方法：直接使用window.open(pageURL,name,parameters)方式直接打开窗口
7. FireFox与IE的父元素（parentElement）的区别
    IE：obj.parentElement、obj.parentNode
    FireFox：obj.parentNode
    解决方法：统一使用obj.parentNode获取父元素（父节点）
8. document.formName.item(‘itemName’)问题
    IE：document.formName.item(‘itemName’)或document.formName.elements[‘elementName’]
    FireFox：document.formName.elements[‘elementName’]
    解决方法：统一使用document.formName.elements[‘elementName’]
9. 集合类对象问题
    IE：使用()或[]获取集合类对象
    FireFox：只能使用[]获取
    解决方法：统一使用[]获取
10. 自定义属性问题
     IE：可使用获取常规属性的方法获取自定义属性，也可以使用getAttribute（）
     Firefox：仅支持getAttribute（）获取
     解决方法：统一使用getAttribute()获取自定义属性
11. input.type问题
     IE：input.type属性为只读
     Firefox：input.type属性为读写
     解决方法：尽量不修改input.type属性；修改input.type属性使用替换方式（使用新的input替换之前的input）
12. event.srcElement问题
     IE：event对象有srcElement属性，没有target属性
     Firefox：event对象有target属性，没有srcElement属性
     解决方法：使用srcObj = event.target ? event.target : event.srcElement
     注：考虑第8条问题，使用myEvent替换evnet
13. 事件委托方法
     IE：使用document.body.onload = inject,其中function inject()已被实现
     Firefox：使用document.body.onload = inject() new Function (‘inject()’)
     解决方法：统一使用document.body.onload = new Function (‘inject()’) 或 document.body.onload = function(){}
14. js兼容（IE）

    使IE5,IE6兼容到IE7模式（推荐）
    <!–[if lt IE 7]>
    <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
    <![endif]–>
    使IE5,IE6,IE7兼容到IE8模式
    <!–[if lt IE 8]>
    <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
    <![endif]–>
    使IE5,IE6,IE7,IE8兼容到IE9模式
    <!–[if lt IE 9]>
    <script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
    <![endif]–>   
    

15. 建立单选钮

    IE以外的浏览器
    var rdo = document.createElement('input');
    rdo.setAttribute('type','radio');
    rdo.setAttribute('name','radiobtn');
    rdo.setAttribute('value','checked');
    IE:
    var rdo =document.createElement(<input type="radio" checked>)
    解决办法：这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了;万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。