浏览器兼容问题可分为三类： 1.与渲染相关：和样式相关的问题，即体现在布局效果上的问题。 2.与脚本相关：包括Javascript和DOM、BOM方面的问题。 3.其他：比如浏览器自身提供的功能，在内
浏览器兼容问题可分为三类：
1.与渲染相关：和样式相关的问题，即体现在布局效果上的问题。
2.与脚本相关：包括Javascript和DOM、BOM方面的问题。
3.其他：比如浏览器自身提供的功能，在内核层之上的。
下面总结一些常见问题及解决办法get
Javascript
1. HTML对象获取的问题
FireFox：document.getElementById（‘idName’）;
IE:document.idname 或者 document.getElementById("idName");
解决:统一使用 document.getElementById(‘idName’);
2. const问题
Firefox下，可以使用const关键字或var关键字来定义常量；
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)来代替IE下的event .X 或者 Firefox下的event.PageX
4, window.location.href 问题
IE或者Firefox2,0下，可以使用 window.location 或 window.location,href
Firefox1,5下 只能使用 window.location
解决：使用window.location 来代替 window . location . href
5. frame 问题
例如：<frame src = "xxx.html" id = "frameId" name = "frameName" />
1,访问frame 对象：
IE:使用window .frameId 或者 window.frameName 来访问这个frame 对象，frameId和frameName可以同名。
Firefox：只能使用window.frameName来访问这个frame对象
另外，在IE和Firefox 中都可以使用window . document . getElementById( "frameId" )来访问这个对象
6.自定义属性问题
在Iej下 ， 可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute（）获取自定义属性； Firefox下，只能使用 getAttribute（）获取自定义属性
解决：统一使用getAttribute（）来获取自定义属性
get小技巧：
》div的垂直居中问题 vertical-align：middle 将行距增加到和整个DIV一样高 line-height:200px;然后插入文字，就垂直居中了，缺点是 要控制内容不要换行
》margin 加倍的问题 设置为float的div在IE下设置的margin会加倍。这是一个IE6都存在的bug解决办法是在这个div 里面加上display：inline 例如 <#div id = ’imfloat‘> 相应的css 为#lamFloat{ float：left margin ：5px } 此时IE下理解为10px 加上display：inline 就可以避免
》浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;
》页面的最小宽度 min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度
》DIV浮动IE文本产生3px 的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。 #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} <div id="box"> <div id="left"></div> <div id="right"></div> </div>
