css3:!important声明的样式优先级最高,ie6不支持,覆盖页面内任何位置定义的元素样式, 一:dom中绑定事件事件 dom0级绑定:兼容所有浏览器,dom0.οnclick=function(){} dom2级:dom0.addEventListener('click',function(){}), ie浏览器:dom0.attachEvent('click',function(){})
二:获取事件对象: document.οnclick=function(e){ var evt=e||window.event; console.log(e); }; ie:用window.event; 三:ajax请求时:创建兼容的xhr对象 function createXHR(){ var xhr; try { xhr = new XMLHttpRequest(); } catch (e) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xhr = false; } } } return xhr; } var xhr = createXHR(); 四:获取浏览器窗口尺寸 var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 不包括工具栏和滚动条 五:一些h5标签: [if lte ie8] document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); [endif] 六:盒模型兼容:ie8及更早ie版本不支持填充的宽度和宽度属性,解决办法在文档开头加 css3中.lang伪类IE8必须声明<!DOCTYPE>才能支持;lang伪类。 七:webapp: 1:移动端事件 overflow-y:scroll:让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁。 八:
九:判断浏览器类型:
if(navigator.userAgent.indexOf('Opera') != -1) {
alert('Opera');
}
else if(navigator.userAgent.indexOf('MSIE') != -1) {
alert('Internet Explorer');
}
else if(navigator.userAgent.indexOf('Firefox') != -1) {
alert('Firefox');
}
else if(navigator.userAgent.indexOf('Netscape') != -1) {
alert('Netscape');
}
else if(navigator.userAgent.indexOf('Safari') != -1) {
alert('Safari');
}
else{
alert('无法识别的浏览器。');
}
h5页面尝试调用app,提示是否打开手机中app,
const iframe = document.createElement('iframe');
iframe.src = 'URL scheme'; // URL scheme的方式跳转
iframe.style.display = 'none';
document.body.appendChild(iframe);
调用失败时:
const timer = 1000;
复制代码
setTimeout(function() { // 执行成功后移除iframe document.body.removeChild(iframe);
//setTimeout小于2000通常认为是唤起APP失败
if (Date.now() - last < 2000) {
// 执行失败函数
// 这里需要考虑一下之前知乎遇到的那个问题(浏览器询问导致时间小于2S)
} else {
// 执行成功函数
}}, timer);
在iframe被拦截的情况下,使用window.location.href = URL scheme来做兼容。
复制代码
HTML注释在IE6中的BUG 如果两个浮动元素之间存在注释,那么可能导致布局错位或文字的BUG。 这种情况,我们通常将注释去掉 css中的margin:除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。 css中的zoom的作用是放大为原来的2倍,火狐浏览器不支持zoom属性, css中opacity属性兼容ie8及更早版本filter:alpha(opacity=100); opacity:1.0;