Html 如何在IE 11中防止SVG形状粘到底部？_Html_Css_Internet Explorer_Svg

Html 如何在IE 11中防止SVG形状粘到底部？

html css internet-explorer svg

Html 如何在IE 11中防止SVG形状粘到底部？,html,css,internet-explorer,svg,Html,Css,Internet Explorer,Svg,我试图创建一个网站的首页简单的斜线形状，并有一些麻烦 <title>title</title> <link rel="stylesheet" href="stylesheet.css" type="text/css"> </head> <body> <div id="main"> <div id="welcomediv">

我试图创建一个网站的首页简单的斜线形状，并有一些麻烦

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

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

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

代码如下：

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

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

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>

这在我尝试过的所有其他浏览器（Chrome Opera Firefox）中都能正常工作，但在IE 11中，黄色的“#箭头”形状覆盖了p2和p3

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

如果有人知道这里发生了什么，我将非常感谢您的指导，谢谢

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