0、H5新标签在IE9以下的浏览器识别
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
1、不同浏览器的标签默认的外margin 和内padding不同
解决方案: css 里增加通配符 * { margin: 0; padding: 0; }
2、IE6双边距问题;在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案:设置display:inline;
3、当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度
解决方案:超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
4、图片默认有间距
解决方案:将img显示设置成display:block;float: left;
5、IE9一下浏览器不能使用opacity
//解决方案
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
6、边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;
解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;
7、cursor:hand 显示手型在safari 上不支持
解决方案:统一使用 cursor:pointer
8、innerText兼容性问题,在火狐中不支持该属性
//解决方法 需用textContent
// 处理innerText的兼容性问题
function getInnerText(element) {
// 判断当前浏览器是否支持元素的innerText属性,支持innerText使用element.innerText获取内容
// 如果不支持innerText属性,使用element.textContent获取内容
if(typeof element.innerText ==='string') {
return element.innerText;
} else {
return element.textContent
}
}
9、万能清除浮动
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
10、超链接访问过后hover样式就不出现的问题
解决方案
- a:link {}
- a:visited {}
- a:hover {}
- a:active {}
11、页面的最大、小宽度
IE不认得这个min-width、max-width
min-width:320px;
width:expression_r(document.body.clientWidth < 320 ? "320px": "auto" );
max-width:750px;
width:expression_r(document.body.clientWidth > 750 ? "750px": "auto" );
12、td高度的问题,table中td的宽度都不包含border的宽度,但是oprea和ff中td的高度包含了border的高度
解决:设置line-height和height一样。在ie中如果td中的没有内容,那么border将不会显示
13、IE6两个层之间3px的问题
左边层采用浮动,右边没有采用浮动,这时在ie6中两层之间就会产生3像素的间距
解决:1、右边层也采用浮动 float 2、左边层添加属性 margin-right:-3px;
14、网页可见区域宽、高
var winW = document.body.clientWidth || document.docuemntElement.clientWidth;
var winH = document.body.clientHeight || document.docuemntElement.clientHeight;
15、整个网页的宽、高
var winW = document.body.scrollWidth || document.docuemntElement.scrollWidth;
var winH = document.body.scrollHeight || document.docuemntElement.scrollHeight;
16、网页被卷去的高、网页左卷的距离
var scrollHeight = document.body.scrollTop || document.docuemntElement.scrollTop;//网页被卷去的高
var scrollLeft = document.body.scrollLeft || document.docuemntElement.scrollLeft;//网页左卷的距离
17、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;
}
18、事件冒泡的兼容问题
IE浏览器: eve.cancelBubble = true;
其他浏览器:eve.stopPropagation();
//解决办法
function stopBubbles(e){
if(e.stopPropagation){
//针对非ie浏览器
e.stopPropagation();
}else{
//针对ie浏览器
e.cancelBubbles = true;
}
}
19、阻止浏览器默认行为的兼容问题
IE浏览器: window.event.returnValue = false;
其他浏览器:e.preventDefault();
//解决办法
if( e.preventDefault ){
//针对非ie浏览器阻止浏览器行为
e.preventDefault();
}else{
//针对ie浏览器 IE中阻止浏览器行为
window.event.returnValue = false;
}
20、事件委托的兼容问题
IE浏览器: e.srcElement;
其他浏览器: e.target;
//解决办法
dom.onclick = function(eve){
var e = eve || window.event;
var target = e.target || e.srcElement;
if(target.nodeName == "LI"){
console.log(target.innerHTML);
}
}
21、键盘事件获取的兼容问题
IE浏览器: event.which
其他浏览器 : event.keycode
//解决办法
function code(eve){
var e=eve||window.event;
var code=e.keyCode||e.which;
}
22、DOM节点相关的问题 主要兼容IE 6 7 8
function nextnode(obj){//获取下一个兄弟节点
if (obj.nextElementSibling) {
return obj.nextElementSibling;
} else{
return obj.nextSibling;
};
}
function prenode(obj){//获取上一个兄弟节点
if (obj.previousElementSibling) {
return obj.previousElementSibling;
} else{
return obj.previousSibling;
};
}
function firstnode(obj){//获取第一个子节点
if (obj.firstElementChild) {
return obj.firstElementChild;//非IE678支持
} else{
return obj.firstChild;//IE678支持
};
}
function lastnode(obj){//获取最后一个子节点
if (obj.lastElementChild) {
return obj.lastElementChild;//非IE678支持
} else{
return obj.lastChild;//IE678支持
};
}
23、标准的事件绑定方法函数为addEventListener,但IE下是attachEvent
function addEvent(obj,oEvn,fn){
if(obj.addEventListener){
obj.addEventListener(oEvn,fn,false);
}else{
obj.attachEvent('on'+oEvn,fn);
}
}