浏览器兼容
css兼容
- cursor定义手型
Firefox不支持hand，IE支持pointer
解决方法：统一使用pointer - 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.使用定位，背景色与子元素处于同级关系 - width和padding
IE7和Firefox中宽度不包括padding，IE6中包括padding - 盒模型的区别（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 - 盒模型区别（IE5和IE6）
IE5下div{width:200px;margin:0 10px}
div宽度被解析为200（总宽度） - 10（左填充） - 10（右填充）
IE6及其他浏览器被解析为 200 + 10 + 10
解决方法：div - ul和ol列表缩进问题
IE：设置margin：0px可以去除列表上下左右缩进、空白、列表编号和圆点，padding无效果
Firefox：设置margin：0px去除上下空白，padding：0px去除左右缩进，list-style：none去除编号和圆点
解决方法：统一设置list-style：none;margin:0;padding:0; - 元素水平居中问题
IE：设置父级{text-align:center}
Firefox：margin:0 auto
解决方法：同时设置父级和自身属性 - div实现垂直居中
vertical-align:middle; line-height:(父级高度)
缺点：需要控制内容不换行 - margin加倍的问题
设置为float的div在IE下设置的margin会加倍
解决方法：设置display:inline - IE的宽高问题
IE没有min-width和min-height的属性
解决方法：#box{ width: 80px; height: 35px;}html>body #box - 页面的最小宽度
IE不识别min
解决方法：1.#container{ min-width: 600px; width:expression(document.body.clientWidth＜ 600? "600px": "auto" );}
2.使用js判断实现最小宽度 - div浮动IE产生3px的间距
左边对象浮动，右边采用外补丁的左边距定位，右边对象内的文本会离左边有3px的间距
解决方法：左边对象设置margin-right:-3px - 对齐文本与文本输入框
vertical-align:middle(除了IE，其他都适用) - li内容过长后使用省略号代替
li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;}
(除了Firefox，其他都适用) - web标准中IE无法设置滚动条颜色的问题
解决方法：使用html替换body - 无法定义1px高度的容器
原因：IE6下因为默认的行高造成的
解决方法：overflow:hidden/zoom:0.08/line-height:1px - 设置层显示在flash之上
解决方法：将flash设置透明
写法：<param name="vmode" value="transparent" /> - 超链接（a标签）设置边框和背景
解决方法：设置display:block,float:left保证不换行 - 超链接（a标签）访问后hover样式消失问题
解决方法：修改顺序 L-V-H-A
书写方式：a:link{} -> a:visited{} -> a:hover{} -> a:active{} - form标签
IE：自动添加margin
Firefox： margin：0
解决方法：设置margin和padding ul,form - 属性选择器（css隐藏bug）
p[id]{} div[id]{}
p[id]属性选择器，所有p标签带有id的都是同样式 - Firefox文本无法撑开容器高度(实现固定高度允许被撑开)
标准浏览器：固定高度值不会被撑开
IE：固定高度值可以被撑开
解决方法：div - Firefox和IE对空格尺寸的解释
Firefox：空格尺寸4px ；忽略div与div之间的空格
IE：空格尺寸8px ；不会忽略div与div之间的空格 - 条件注释
<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 -- 大于 ！ -- 不等于 - 强制渲染
<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支持所要求的兼容性模式多于一种 - 字体大小定义不同
问题症状：对字体大小small定义不同，Firefox为13px，而IE为16px，差别比较大
解决方法：使用指定的字体大小如14px或者使用em
js兼容
- HTML获取节点问题
fireFox：document.getElementById('idName')
IE：document.getElementById('idName') / document.idName
解决方法：统一使用document.getElementById('idName') - 变量名声明问题
FireFox：const、var、let
IE：var
解决方法：统一使用var - event.x与event.y问题
IE：event对象有x、y属性，没有pageX、pageY属性
FireFox：event对象有pageX、pageY属性,没有x、y属性
解决方法：使用mX(mX = event.x?event.x:event.pageX)替代属性 - window.location.href问题
IE、FireFox2.0x可以使用window.location和window.location.href属性
Firefox1.5x及以下只能使用window.location
解决方法：统一使用window.location.href - frame问题
(1)访问frame对象
统一写法：window.document.getElementById('frameId')
(2)切换frame内容
统一写法：1. window.document.getElementById('frameId').src = url
2.window.frameName.location = url
传递参数（子传父）：使用parent属性 - 模态和非模态窗口问题
IE：showModalDialog（打开模态窗口）、showModelessDialog(打开非模态窗口)，FireFox不支持
解决方法：直接使用window.open(pageURL,name,parameters)方式直接打开窗口 - FireFox与IE的父元素（parentElement）的区别
IE：obj.parentElement、obj.parentNode
FireFox：obj.parentNode
解决方法：统一使用obj.parentNode获取父元素（父节点） - document.formName.item('itemName')问题
IE：document.formName.item('itemName')或document.formName.elements['elementName']
FireFox：document.formName.elements['elementName']
解决方法：统一使用document.formName.elements['elementName'] - 集合类对象问题
IE：使用()或[]获取集合类对象
FireFox：只能使用[]获取
解决方法：统一使用[]获取 - 自定义属性问题
IE：可使用获取常规属性的方法获取自定义属性，也可以使用getAttribute（）
Firefox：仅支持getAttribute（）获取
解决方法：统一使用getAttribute()获取自定义属性 - input.type问题
IE：input.type属性为只读
Firefox：input.type属性为读写
解决方法：尽量不修改input.type属性；修改input.type属性使用替换方式（使用新的input替换之前的input） - event.srcElement问题
IE：event对象有srcElement属性，没有target属性
Firefox：event对象有target属性，没有srcElement属性
解决方法：使用srcObj = event.target ? event.target : event.srcElement
注：考虑第8条问题，使用myEvent替换evnet - 事件委托方法
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(){} - 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]–> - 建立单选钮
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属性，别的浏览器都不可以识别出这一属性。问题解决。
