浏览器兼容问题和webapp

最新推荐文章于 2021-10-27 12:06:28 发布

weixin_33717117

最新推荐文章于 2021-10-27 12:06:28 发布

阅读量326

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/59be624f51882538de1223d0

本文介绍了前端开发中常见的兼容性和技巧问题，包括CSS3的!important声明、DOM事件绑定、AJAX请求、浏览器窗口尺寸获取、HTML5标签兼容性、盒模型处理、WebApp开发注意事项、事件触发以及浏览器类型的判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;