ie 浏览器布局中的 offset
生活随笔
收集整理的這篇文章主要介紹了
ie 浏览器布局中的 offset
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
出現原因：
此處的offset的值表示的是盒子模型經過計算后的實際偏移量，通常是margin及定位偏移量之和（flex布局導致的偏移也會計算在內）。在此處也無需消除。
解決辦法：
因為我這里有滾動條，且使用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瀏覽器}}這里安利一篇文章：對CSS中的Position、Float屬性的一些深入探討
總結
以上是生活随笔為你收集整理的ie 浏览器布局中的 offset的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 滚动条造成页面抖动问题
- 下一篇： HTML引入vue.js，在ie浏览器中