浏览器兼容性问题
浏览器兼容性问题
1、ajax xmlhttprequest对象获得
IE下获得是：
用 ActiveXObject（"Microsoft.XMLHTTP"）的方法获得；
示例：var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
其余获得方法：
用 XMLHttpRequest()的方法获得；
示例 var xmlhttp = new XMLHttpRequest();
兼容函数：
function getXMLhttpRequest() {
var xmlhttp = null;
if (document.all) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
2、绑定事件
IE下的绑定方法是：
用 obj.attachEvent（）方法；
其余绑定事件的方法是：
用 obj.addEventListener（）方法；
于是，可以写一个兼容函数：
function setEvent(obj, eventname, functionname) {
if (document.all) {
return obj.attachEvent("on" + eventname, functionname);
} else {
return obj.addEventListener(eventname, functionname, false);
}
}
3、event对象的获得
4、CSS样式的获取
IE下获取：
用 obj.currentStyle[attr]的方法；
其余获取方法：
用 getComputedStyle(obj, false)[attr]；
兼容函数：
function getStyleTwo(obj, attr) {
return obj.currenStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
5、不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：CSS里 * 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
6、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
示例代码：
<div id="first"></div>
#first{
background-color: red;
width: 200px;
height: 200px;
float: left;
margin-left: 100px;
}
在IE和其余浏览器下会有不同的效果；
解决方案：在margin-left:100px；后面加 display: inline;
7、设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
碰到频率：60%
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
示例代码：
#first{
background-color: red;
width: 200px;
height: 10px;
}
<div id="first"></div>
解决方案：在样式里面加上 overflow: hidden;的代码
8、几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
解决方案：使用float属性为img布局
演示代码：
<img src="images/20664369-1_b.jpg" alt="" class="img">
<img src="images/20670230-1_b.jpg" alt="" class="img">
<img src="images/20679764-1_b.jpg" alt="" class="img">
.img{
background-color: red;
float: left;
}
9、ie6 不支持 fixed 这个东西，所以我们的该怎么做呢？
解决方案：可以用JS代码来固定其位置；
10、关于手形光标. cursor: pointer. 而hand 只适用于 IE.
11、浮动ie产生的双倍距离
示例代码：
#box{ width: 200px;
height: 200px;
background-color: red;
float:left; width:100px; margin:0 0 0 100px;}
<div id="box"></div>
解决方案：解决方案：display: inline---/使浮动忽略
ie7,ie8,firefox,chrome等高端浏览器下，已经可以识别 !important属性，但是Ie6是不行的
演示代码：
#colortest
{border:20px solid #60A179 !important;
border:20px solid #00F;
padding: 30px;
width : 300px;}
<div id="colortest"></div>
这里有个新的东西if ie可以判断当前浏览器是否为ie浏览器
示例代码：
<style type="text/css">
#colortest
{width: 100px;height: 100px;background-color: red}
</style>
<!--[if IE]>
<style type="text/css">
#colortest
{width: 100px;height: 100px;background-color: blue}
</style>
<![endif]-->
<div id="colortest"></div>