一、css兼容1. 不同浏览器的标签默认的margin和padding不同解决方案：
2.css3新属性，加浏览器前缀兼容早期浏览器
3.块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题问题：常见症状是IE6中后面的一块被顶到下一行。 4.设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度解决方案：
5.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug解决方案：在display:block;后面加入display:inline;/display:table; 6. IE浏览器div最小宽度和高度不生效的问题解决方案： #box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}7.超链接访问过后hover样式就不出现的问题解决技巧是：改变CSS属性的排列顺序: L-V-H-A。 a:link {}
a:visited {}
a:hover {}
a:active {}8.图片默认有间距解决方案：使用float属性为img布局(所有图片左浮) 9. css hack解决浏览器兼容性background-color:yellow0; 0 是留给ie8的 background-color:pink; ie7定了； _background-color:orange; _专门留给神奇的ie6； 二、js兼容1. 事件绑定IE: 2. event事件对象问题 document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
var e=ev;
console.log(e);
}
document.onclick=function(){//谷歌和IE支持，火狐不支持；
var e=event;
console.log(e);
}
document.onclick=function(ev){//兼容写法；
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}3.event.srcElement(事件源对象)问题IE： event对象有srcElement属性，但是没有target属性；
4.获取元素的非行间样式值：IE: dom.currentStyle[‘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.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}6.阻止事件默认行为：//js阻止默认事件 一般阻止a链接href，form表单submit提交
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}7.ajax兼容问题IE： ActiveXObject
跨浏览器兼容解决方法： 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("失败");
}
}
};
};
};来源：https://www./content-4-826201.html
|
|
|
