width = 100% 在 IE、Microsoft Edge 浏览器中无法正常工作答案

【问题标题】：width = 100% not properly working in IE, Microsoft edge browserwidth = 100% 在 IE、Microsoft Edge 浏览器中无法正常工作
【发布时间】：2019-01-08 08:40:48
【问题描述】：

enter image description here我在边缘和所有其他 IE 版本中遇到了一些奇怪的问题。问题是我声明了一个 div 并在该 div 上设置了一些属性。最初我设置宽度：1140px 但是当屏幕调整到最大-width：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>

【问题讨论】：

你能在代码 sn-p 中复制你的问题吗？
我在代码 sn-p 中复制了我的问题

标签： html css internet-explorer media-queries microsoft-edge

【解决方案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>

【讨论】：

如果我使用 max-width:1140px 就可以了。但是当我调整浏览器的大小时，div 中的内容被破坏了。我只想删除水平滚动条。
@MehediHasanMethun 如果您不想要水平滚动条，则将overflow: hidden 添加到header。我更新了代码。检查并告诉我
谢谢您，先生，您是生命的救星。因此，我被主题森林拒之门外，但现在我学到了新东西……
我们从错误中吸取教训！如果它有助于接受并支持答案..谢谢！

【解决方案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>

【讨论】：