Question

我正在尝试为网站的首页创建简单的斜线形状并遇到一些麻烦。

我终于设法得到了一个合理的结果（对响应性仍然不满意），但是当在IE 11中运行时，斜线形状延伸到页面底部并覆盖它下面的所有内容。

以下是代码：

HTML

        <title>title</title>
        <link rel="stylesheet" href="stylesheet.css" type="text/css">
    </head>
  <body>
      <div id="main">
          <div id="welcomediv">
                <img src="img/mainlogo.png"/>
          </div>

          <div class="splash" id="p1">
              </div>


          <div class="splash">
               <svg id="ting" width="100%" viewBox="0 10 200 10">
                    <polygon id="arrow" points="0,30 0,500 250,500 250,-80" >
                    </polygon>
                </svg>                
          </div>


          <div class="splash" id="p2">  
          </div>    

      <div class="splash" id="p3">    
      </div>    
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  </body>
</html>

CSS

#main {
    position: absolute;
    width:100%;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

.splash {
     height: 100vh;
     width: 100vw;
    float: left;
 }

#p1 {
    position: absolute;
    left: 0px;
    top: 0px;
     background: black;
    background-image: url(img/bgic-fd.png);
    background-size: cover;
}

#p2 {
    background: black;
}

#p3 {
    z-index: 500;
    background: green;
}
#ting {

    position: absolute;
    top:25vh;

    height: 150vh;
}

#arrow {
    fill: #fec44a;
}

#welcomediv {
    position: absolute;
    left: 50vw;
    top: 150px;
    margin-left: -15vw;
    z-index: 50;
    width: 30vw;
}

#welcomediv img {
    width: 100%;
}

这在我尝试过的所有其他浏览器（Chrome Opera Firefox）中都能正常运行，但在IE 11中，黄色＆＃34;＃arrow＆＃34;形状覆盖p2和p3。

如果有人知道这里发生了什么，我真的很感谢一些指导，谢谢！

如何防止我的SVG形状在IE 11中坚持到底？

0 个答案: