Question

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

我发现了：

如果我删除CSS的第29行（在CodePen上），声明宽度为.branding-wrapper，则网站的大小正确（但.branding-wrapper必须与视口一样宽。更改宽度为100vw不会导致任何变化。
如果我删除媒体查询和CSS的第9行（对齐内容：中心），网站的大小正确（但图片必须居中）

.test {
   width: 100%;
   min-height: 400px;
   background-color: red;
   margin-top: calc(100vh);
}
.header {
   display: flex;
   justify-content: center;
}
.header-img {
   width: 2000px;
   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%);
  }

  .branding-wrapper {
    transform: translateX(-50%);
  }
}
.branding-wrapper {
   height: 350px;
   width: 100%;
   position: absolute;
   bottom: 0px;
   background: blue;
}

<body class="home blog">
<div class="header">
    <img src="image link" alt="test" class="header-img">
    <div class="branding-wrapper ">
  text
    </div>
</div>
<div class="test"></div>

问题可以在这里看到： https://codepen.io/mateuszcora/pen/WdOQMr

Answer 1

通过在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;
    }

为什么我的网站比IE和Edge中的视口宽约50％？

1 个答案: