Question

在这个问题被标记为SVGs not scaling properly in IE - has extra space的重复之后，我认为这是一个单独的问题，尽管解决方案的一部分是相似的。我做了更多的挖掘工作，实际上，它更像是this question的副本。我可以确认它有效。使用此代码viewBox="0 0 2999.89 174.23" preserveAspectRatio="xMidYMax"似乎可以完成任务。底部最大值：0，顶部最小值：0。

基本上IE需要在svg标记中设置位置，并忽略CSS中的绝对位置规则。

这是Edge进行不必要的垂直居中的屏幕截图：

Behaviour on Edge, the #curve3 div expands to full height of its parent and is vertically centred

好，尝试以正确的方式发布此问题！

为什么MS Edge忽略＃curve3 div上的绝对位置？（请参见代码示例）为什么该div仅在Edge中垂直居中显示？

.section {
  background-color: green;
  /*display: flex;*/
  margin-top: 200px;
  padding: 200px 0;
  position: relative;
}

#wpshala_services_row {
    position: absolute;
    top: 0;
    width: 100%;
}

#wpshala_services_curve {
    height: 80px;
    position: absolute;
    top: -80px;
    width: 100%;
}

.svg-container {
    background-color: lightblue;
    border: 1px solid red;
    height: 80px;
    position: relative;
}

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

#curve3 {
    position: absolute;
    bottom: -1px;
    width: 100%;
    z-index: 100;
}

#curve3 path {
      fill: green;
    }

<div class="section">
  <div id="wpshala_services_row">
    <div id="wpshala_services_curve">
      <div class="svg-container">
        <svg id="curve3" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2999.89 174.23">
        <canvas width="2999.89" height="174.23"></canvas>
        <path class="cls-1" d="M3000,300.5.11,301.22l.74-77.11c740.75-113.33,944-140.89,1480.15-10s1519-37.78,1519-37.78" transform="translate(-0.11 -126.99)"></path>
      </svg>
      </div>
    </div>
  </div>
</div>

原始问题和背景：

在this site

MS Edge和IE11的弯曲svg部分的布局已损坏。在FF，Chrome和Safari中看起来像预期的那样。 svg曲线绝对位于相对容器的位置内，以便它们可以匹配（容器正上方或下方的）渐变，并在粘贴到相邻容器的同时以不同的屏幕尺寸正确缩放。

但是，在IE11 / Edge中，这些曲线似乎在其容器内垂直居中，而不是位于绝对的顶部或底部（-1像素）。

我本来以为这与flexbox有关，但删除显示内容：.section中的flex并没有改变。

此外，“服务”上方的svg曲线受到容器高度的比例限制（因此，该曲线的左右两侧都可以看到空间，而不是伸展整个宽度）。我可以增加该高度，但仍然需要能够将其定位到容器的底部。

我还发现了一个错误，其中在flexbox容器中margin：0 auto将内容推到了容器的右边缘（这一问题已通过简单地删除不需要的margin：0 auto来解决。但是奇怪的是，MS如何以多种方式做很多事情。

我可以使用流浪汉在Win10中启动Edge浏览器，在Win8.1中启动IE11，因此可以使用DevTools达到这一目的，并可以进行进一步测试。但是有已知的错误吗？

我搜索并发现了与flexbox或position：absolute不同的bug，但不是专门针对此bug。

如果是这样，解决方案是什么？

IE和Edge忽略了svg

0 个答案: