IE 宽度 100% 不起作用。如何解决？答案

【问题标题】：IE width 100% doesn't work. How to fix it?IE 宽度 100% 不起作用。如何解决？
【发布时间】：2019-07-31 21:18:20
【问题描述】：

此代码在任何 IE 浏览器中都不起作用：

main {
  position: relative;
}

div {
  position: absolute;
  height: 300px;
  background-color: red;
  width: 100%;
}

<main>

  <div></div>

</main>

我尝试使用width 100vw，但如果页面不适合视口，则会出现水平滚动。 A 试过类似 width calc(100vw - vertical_scroll_width) 但如果页面上没有垂直滚动就不行了。

【问题讨论】：

【解决方案1】：

“部分支持仅指元素（后来添加到规范中）是“未知的”，尽管它仍然可以使用和设置样式。” 如图所示：https://caniuse.com/#search=main

不完全支持 Main。您仍然可以通过样式设置它。

如前所述，只需这样做：

main {
  display: block;
}

【讨论】：

【解决方案2】：

您只需要将 main 元素设置为块（在 IE 中默认情况下它不是块）：

main {
  display: block;
}

【讨论】：