html - width = 100% 在 IE、Microsoft edge 浏览器中无法正常工作

Question

enter image description here我在边缘和所有其他 IE 版本中遇到一些奇怪的问题。问题是我声明了一个 div 并在该 div 上设置了一些属性。最初我设置宽度:1140px 但是当屏幕调整到它的最大宽度时:1200px 我设置div 宽度:100%。所有这些更改在 chrome、firefox、opera、safari 中都运行良好，但是当我在 edge 或任何 IE 版本中测试此代码时，它在设备屏幕的右侧占用了太多空间。

header{
width: 100%;
height: 500px;
position: relative;
}

.beast-text-box {
position: absolute;
width: 1140px;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

@media only screen and (max-width: 1200px) {
.beast-text-box {
width: 100%;
}
}

<header>
    <div class="beast-text-box">
        <h1 class="heading-h1">TRAIN LIKE A BEAST</h1>
        <a href="#" class="btn-full js--scroll-to-plan">BEAST                      MODE</a>
        <a href="#" class="btn-full js--scroll-to-start">SHOW ME                   MORE</a>
    </div>
</header>

Answer 1

transform 导致 IE 出现问题。尝试使用下面的 CSS 将媒体中的 .beast-text-box

position: relative;
left: 0;
transform: translate(0);

header {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.beast-text-box {
  position: absolute;
  max-width: 1140px;
  height: auto;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

@media only screen and (max-width: 1200px) {
  .beast-text-box {
    width: 100%;
    /*Added this CSS*/
    position: relative;
    left: 0;
    transform: translate(0);
    /*Added this CSS*/
  }
}

<header>
  <div class="beast-text-box">
    <h1 class="heading-h1">TRAIN LIKE A BEAST</h1>
    <a href="#" class="btn-full js--scroll-to-plan">BEAST                      MODE</a>
    <a href="#" class="btn-full js--scroll-to-start">SHOW ME                   MORE</a>
  </div>
</header>