ie 浏览器布局中的 offset

最新推荐文章于 2022-07-02 23:59:49 发布

Start2019

最新推荐文章于 2022-07-02 23:59:49 发布

阅读量1.3k

点赞数

分类专栏： vue项目问题

原文链接：https://blog.csdn.net/long870294701/article/details/81666306

版权

vue项目问题专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述

出现原因：

此处的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;
  else
  return 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浏览器
            }
        }