在不同的浏览器中,浏览器的内核都是不相同的,所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种,一是渲染引擎,另一个是js引擎,所以浏览器的兼容性问题一般是指:css兼容、js兼容
Css兼容性问题:
1.不同浏览器的标签默认的margin和padding不同
解决办法:可以通过设置全局样式来解决这个问题,这样所有的样式都会重置,初始值都会相同了。
2.css3新属性,加浏览器前缀兼容早期浏览
-moz- / 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE /
3.块属性标签float后,又有横行的margin的情况下,IE浏览器margin加倍的问题
设置为float的div在IE下设置的margin会加倍。这是一个IE6都存在的bug。解决方案是在这个div里面加上display:inlin.
4.设置较小高度标签(小于一般10px),在IE6,IE7,遨游中高度超出自己设置高度
可以通过给高出的标签设置overflow:hidden
或设置行高line-height小于你设置的高度
5.行内属性标签,设置display:black后采用float布局,又有横行的margin的情况下,IE6间距bug
IE6里的间距比超过设置的间距,可以通过在display:block;后面加入display:inline;display:table;
6.IE浏览器div最小高度和宽度的问题
加宽高,并且宽高加auto
7.超链接访问过hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
a:link{}>a:visited{}>a:hover{}>a:active{}
8.图片默认有间距
几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起作用。
可以通过使用float属性为img布局(所有图片左浮)
9. css hack解决浏览器兼容性
不同浏览器,识别不同的样式,css hack本身就是处理浏览器兼容的
二、js兼容
1. 事件绑定
IE: dom.attachEvent();
标准浏览器: dom.addEventListener(‘click',function(event){},false);
var x = document.getElementById("myBtn");
if (x.addEventListener) { //所有主流浏览器,ie9+
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}
2.event事件对象问题
document.οnclick=function(ev){//谷歌火狐的写法,IE9以上支持,往下不支持;
var e=ev;
console.log(e);
}
document.οnclick=function(){//谷歌和IE支持,火狐不支持;
var e=event;
console.log(e);
}
document.οnclick=function(ev){//兼容写法;
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
3. event.srcElement(事件源对象)问题
IE: event对象有srcElement属性,但是没有target属性;
Firefox: event对象有target属性,但是没有srcElement属性。
解决办法:srcObj = event.srcElement?event.srcElement:event.target;
4.获取元素的非行间样式值
IE: dom.currentStyle[‘width’] 获取元素高度
标准浏览器:window.getComputedStyle(obj, null)['width'];
// 获取元素属性值的兼容写法
function getStyle(obj,attr){
if(obj.currentStyle){
//兼容IE
obj.currentStyle[attr];
return obj.currentStyle[attr];
}else{
//非IE,
return window.getComputedStyle(obj, null)[attr];
}
}
5.阻止事件冒泡传播
//js阻止事件传播,这里使用click事件为例
document.οnclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE.... true: 不被上层元素的事件控制
}
}
6.阻止事件默认行为
//js阻止默认事件 一般阻止a链接href,form表单submit提交
document.οnclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE.. false: 不会进行判断就直接执行下去
}
}
7. ajax兼容问题
IE: ActiveXObject
其他: xmlHttpRequest
在IE6以前不是用XMLHttpRequest创建的,所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()
跨浏览器兼容解决方案:
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
//1.创建ajax对象
//只支持非IE6浏览器
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
//alert(new XMLHttpRequest());
}else{
//只支持IE6浏览器
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但
// 但服务器那端是不解析这个时间的
oAjax.open("get","a.txt?t=" + new Date().getTime(),true);
//3.发送
oAjax.send(null);
//4.接受信息
oAjax.onreadystatechange = function(){
//浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了
if(oAjax.readyState==4){
//状态码,只有等于200,代表接受完成,并且成功了
if(oAjax.status==200){
alert("成功" + oAjax.responseText);
}else{
alert("失败");
}
}
};
};
};
</script>
Js相关
JavaScript分三个部分:
1. ECMAScript标准---基本语法
2. DOM--->Document Object Model 文档对象模型,操作页面元素的
3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的
浏览器中有个顶级对象:window----皇上
页面中顶级对象:document-----总管太监
页面中所有的内容都是属于浏览器的,页面中的内容也都是window的,因为页面中的所有内容都是window的,window是可以省略的.
变量是window的