Html 为什么我的站点比IE和Edge中的视口宽50%左右？

我正在准备的站点大约是视口宽度的150%。我已经检查了站点，没有任何元素看起来比视口宽。问题只出现在IE 10+和Edge中；IE或其他浏览器的早期版本显示一切正常

我发现：

• 如果我删除CSS（在CodePen上）中声明宽度为

  .branding wrapper

  的第29行，则站点大小正确（但.branding wrapper必须与视口一样宽）。将宽度更改为100vw不会导致任何更改

• 如果我删除了媒体查询和CSS的第9行（justify content:center），则站点的大小是正确的（但图像必须居中）

.test{
宽度：100%；
最小高度：400px；
背景色：红色；
保证金上限：计算（100vh）；
}
.标题{
显示器：flex；
证明内容：中心；
}
.标题img{
宽度：2000px；
位置：固定；
排名：0；
z指数：-2；
}
@介质全部和（-ms高对比度：无），（-ms高对比度：激活）{
/*IE10+CSS样式在这里*/
.标题img{
转化：translateX（-50%）；
}
.品牌包装{
转化：translateX（-50%）；
}
}
.品牌包装{
高度：350px；
宽度：100%；
位置：绝对位置；
底部：0px；
背景：蓝色；
}

文本

通过在IE中以另一种方式将图像居中，解决了该问题

.header {
    justify-content:center;
    display:flex;
}
   // margin-bottom:-52px;
}
.header-img {
    min-height: 100vh;
    position: fixed;
    top: 0;
    z-index: -2;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .header-img {
        transform:translateX(-50%);
        margin:0 auto;

    }
    .header{
        display:unset;
        justify-content:unset;
    }

---

这不是一个完整的解决方案，但尝试在某些地方使用max-width。或max-width和width来控制…max-width。仅通过查看您的代码，我猜

。标题img

样式设置不正确。您真正想要的不是固定的

宽度：2000px

。您使用该样式有什么具体原因吗s宽度？是的-我需要图像有一个最小高度。通过宽度或最小宽度设置它可能会很奇怪，但问题是我不希望图像与站点成比例，我希望图像居中。我知道在许多情况下，只有图像的一部分会显示，但这正是我试图实现的Internet Explorer是一个complE与Edge浏览器有很大不同。IE的上一个版本是11。Edge是从头开始构建的（或多或少）。