ie 浏览器布局中的 offset

在这里插入图片描述

出现原因：

此处的offset的值表示的是盒子模型经过计算后的实际偏移量，通常是margin及定位偏移量之和（flex布局导致的偏移也会计算在内）。在此处也无需消除。

解决办法：

父元素设置宽高。
设置margin为负数，从而抵消掉offset的值。
明确声明DOCTYPE，然后改进页面布局与CSS，例如：

<!DOCTYPE html>
<html>
...
</html>

设置定位，利用 top 和 left。
利用 js 代码设置偏移（与方法 2 和方法 4 原理）

因为我这里有滚动条，且使用vue写的，设置了 margin-left:calc(100vw - 100%)，又因为布局需要设置了 padding 。而且这里只有 ie9 才出现了1415px 的偏移量，使用上面的方法2/3/4/5明显不合适。
在这里插入图片描述

在这里插入图片描述
然后给section设置了 width:100%，发现影响到了之前为滚动条设置的 margin-left，最后解决办法是 section{min-width:1220px; _width:1220px;} 。需要注意的是：这里不能设置 100% 的宽度。

判断当前浏览器是否为IE

H5


<!--[if IE 6]>仅IE6可识别<![endif]-->
<!--[if lte IE 6]> IE6及其以下版本可识别<![endif]-->
<!--[if lt IE 6]> IE6以下版本可识别<![endif]-->
<!--[if gte IE 6]> IE6及其以上版本可识别<![endif]-->
<!--[if gt IE 6]> IE6以上版本可识别<![endif]-->
<!--[if IE]> 所有的IE可识别<![endif]-->
<!--[if !IE]><!--> 除IE外都可识别<!--<![endif]-->

js

function isIE(){if (window.navigator.userAgent.indexOf("MSIE")>=1) {return true; }else{return false; }
}

这个方法，edge浏览器中为false，ie11中为false

function isIE() { //ie?if (!!window.ActiveXObject || "ActiveXObject" in window)return true;elsereturn false;}

这个方法，edge浏览器中为false，ie11为true

function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;if(isIE) {var reIE = new RegExp("MSIE (\\d+\\.\\d+);");reIE.test(userAgent);var fIEVersion = parseFloat(RegExp["$1"]);if(fIEVersion == 7) {return 7;} else if(fIEVersion == 8) {return 8;} else if(fIEVersion == 9) {return 9;} else if(fIEVersion == 10) {return 10;} else {return 6;//IE版本<=7}   } else if(isEdge) {return 'edge';//edge} else if(isIE11) {return 11; //IE11  }else{return -1;//不是ie浏览器}}