代码之家  ›  专栏  ›  技术社区  ›  Kim

父框未仅在IE中包装

  •  1
  • Kim  · 技术社区  · 7 年前

    我这里有把小提琴: https://jsfiddle.net/kimwild/mtxgtwr5/2/

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

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

    但是,当在IE中查看主#包装器时,如果您没有完全看到它,则不会显示红色背景。

    非常感谢您的建议。非常感谢。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Jesse Hosain Ahmed    7 年前

    这与Internet Explorer不完全支持 <main> 元素。

    快速修复方法是添加

    main {
      display: block;
    }
    

    到您的CSS。

    有关更多信息,请查看 this question .