Question

enter image description here我在Edge和所有其他IE版本中都遇到了一个奇怪的问题。问题是我声明了一个div并在该div上设置了一些属性。最初我将宽度设置为：1140px，但是当屏幕调整为它的最大宽度：1200px，我将div宽度设置为：100％。所有这些更改在chrome，firefox，opera，safari中都可以正常使用，但是当我在边缘或任何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>

Answer 2

我进行了以下更改，然后开始工作！ header CSS中缺少分号，我改为width: 1140px;而不是max-width: 1140px;。我想发生的是，left: 50%和width: 1140px一起增加了总宽度，并迫使水平滚动条显示在IE11中。

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%;
}
}

<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>

宽度= 100％在IE，Microsoft边缘浏览器中无法正常工作

2 个答案: