html - IE 中所有屏幕尺寸的底部 0

Question

我希望我的 svg 图像位于 block 的底部(position:absolute，底部:0)。但在 Internet Explorer 中它不起作用(显示在中心)。我可以将宽度和高度设置为 svg，它会以某种方式工作，但它会在屏幕尺寸更小/更大的另一台设备上损坏。我该如何解决这个问题？谢谢你!这是代码 codepen

.wrapper {
  padding: 150px 20px 50px;
  text-align: center;
  color: #fff;
}

.main {
  background-color: #000;
  line-height: 48px;
  position: relative;
}

svg {
  position: absolute;
  bottom: 0;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

<div class="main">
  <div class="wrapper">
    <div class="text">Some text here</div>
    <button>click</button>
  </div>
  <svg class="left" fill="#fff" viewBox="0 0 1300 150" width="50%">
    <polygon points="0,0 0,150 1300,150"></polygon>
    </svg>
  <svg class="right" fill="#fff" viewBox="0 0 1300 150" width="50%">
    <polygon points="1300,0 0,150 1300,150"></polygon>
    </svg>
</div>

Answer 1

您可以使用简单的 div 或伪元素来实现同样的效果。以下是我为演示这两种方法而创建的示例。

https://codepen.io/Nasir_T/pen/oEYYob

该示例使用 position 和 border 来按照您的需要设置底部设计。如果您想在其中放置图像，则可以使用 div 解决方案；如果只想在底部的设计中显示箭头切割，则可以使用伪解决方案。