Question

我有这个小提琴：https://jsfiddle.net/kimwild/mtxgtwr5/2/

＆＃13;

main#wrapper {
  z-index: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: red !important;
  border: 10px dotted #4D37DB;
}

figure#about-img {
  width: 100%;
  border-bottom: 1px solid #000000;
  overflow: hidden;
}

article#main {
  width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
  min-height: 100px;
  background-color: green;
}

＆＃13;

<main id="wrapper">
  <figure id="about-img"> <img src="http://www.hauppauge.co/pics/aboutus.jpg" alt="About Us" /> </figure>
  <article id="main">
  </article>
</main>

＆＃13;

为了这个测试，我添加了明亮的背景和边框。它应该与Chrome等所有其他浏览器一样：https://jsfiddle.net/kimwild/mtxgtwr5/2/show/

但是当在IE中查看时，主要的＃wrapper会发生一些事情，你完全看不到它，红色背景没有显示出来。

真的很感激任何建议。谢谢！

Answer 1

这与Internet Explorer尚未完全支持<main>元素有关。

快速解决方法是添加

main {
  display: block;
}

到您的CSS。

有关详细信息，请查看this question。

父框不包含在IE中

1 个答案: