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

时间:2018-07-31 21:04:15

标签: html5 css3 internet-explorer media-queries microsoft-edge

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>

2 个答案:

答案 0 :(得分:2)

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>

答案 1 :(得分:1)

我进行了以下更改,然后开始工作! 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>