浏览器兼容问题和webapp

本文介绍了前端开发中常见的兼容性和技巧问题,包括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;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值