div 元素上方的绝对定位 SVG 显示 Firefox 中的间隙答案

【问题标题】：Absolute positioned SVG above a div element shows a gap in Firefoxdiv 元素上方的绝对定位 SVG 显示 Firefox 中的间隙
【发布时间】：2019-12-22 15:15:51
【问题描述】：

我的问题是，对于绝对定位的 SVG 元素，应该显示在 div 元素上方，Firefox 71.0 (64-bit) 中会显示一个间隙。

以下最小示例概述了问题：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Example</title>
    <style>
      html {
        height: 100%;
      }

      body {
        display: flex;
        flex-direction: column;
        margin: 0;
        min-height: 100%;
      }

      body > div {
        flex-grow: 1;
      }

      #special {
        position: relative;
        background-color: #000;
        color: #FFF;
      }

      #special svg, #special div {
        position: absolute;
        width: 100%;
        bottom: 100%;
      }

      #special div {
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div>
      Box one
    </div>
    <div id="special">
      <svg color="#6A4A3C" viewBox="0 0 100 2">
        <polygon
          points="0 0, 100 0, 100 2, 20 0, 0 2"
          transform="scale(1 -1) translate(0 -2) scale(-1 1) translate(-100 0)"
        ></polygon>
      </svg>
      <!--<div>
        Magic div
      </div>-->
      Box two
    </div>
  </body>
</html>

您可以在here 中运行测试此代码。当您增加或减少宽度时，间隙会发生变化：

我正在寻找一种解决方案，它不只是将 SVG 向下推一个像素，因为分隔线与另一个 div 接触的地方看起来很难看。另外增加一个部分的高度并使其重叠会带来困难，因为很难将这种重叠包含在网站的设计中。

由于这种重叠，很难将上方框的内容居中，所以看起来并不奇怪。

奇怪的是，Chrome 并没有这样做，但它在两侧会这样做。我怎样才能防止这个问题？

【问题讨论】：

comment1：你有 2 个id="special" comment2：我没有看到差距，但请尝试给 svg display:block 或inline-block
注意：<meta> 标签在 HTML 中不使用也不需要结束斜杠，而且从来没有。
@enxaneta 感谢您指出我在结束标签中带有 id 的错字。请看截图。
用 SVG 绘制整个东西（或者用 HTML 绘制）作为一个单一的形状。否则，抗锯齿总是会成为一个问题。

标签： html css svg

【解决方案1】：

让我们尝试一种不同的方法：带有:before...的边框形状...

SCSS

body {
  margin: 0;
}
special-box {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

div {
  flex: 1;
  background: #fff;
}

div + div {
  background: #000;
  &:before {
    content: '';
    display: block;
    border-left: 80vw #000 solid;
    border-right: 20vw #000 solid;
    border-top: 20px #fff solid;
    width: 0;
  }
}

HTML（为了清楚起见我简化了）

<special-box>
  <div></div>
  <div></div>
</special-box>

笔：https://codepen.io/bstees/pen/OJPmmLR

注意：我必须使用vw 作为边框大小的宽度。如果这需要在其他元素的任一侧留出空间，则需要对其进行调整。

【讨论】：

【解决方案2】：

我稍微清理了您的 SVG，并通过让两个元素重叠 1 像素（在 SVG 中添加一个像素以保留形状）来消除抗锯齿。

HTML

...
<svg viewBox="0 0 100 3">
  <polygon
    points="0 0, 80 2, 100 0, 100 3, 0 3"></polygon>
</svg>
...

CSS（有点老套）

#special svg {
  ...
  bottom: calc(100% - 1px);
}

【讨论】：

感谢您的回答。我正在寻找解决方案而不是解决方法。这对设计有副作用。我在我的问题中提到了这一点。
是的，我应该阅读全文。您至少可以使用 SVG 调整。请问您看到重叠的副作用是什么？
您的解决方案没有副作用，因为您相应地增加了形状的下部。 Chrome 在侧面仍然存在抗锯齿问题，即使它几乎不可见。正如@Robert Longson 提到的，可能唯一无压力的解决方案是绘制整个形状？
试试<polygon points="-1 0, 0 0, 80 2, 100 0, 101 0, 101 3, -1 3"> 我添加了一些点来将形状扩展到超出它的框一个像素。我的 Chrome 上没有看到 aa。如果这样做，请告诉我们。
这个解决方案的问题是，我在内容和分隔符之间有一个间隙，即使它不可见。因为无法计算 svgs 视图框的 1 个单位，所以无法弄清楚我必须向下或向上推动分隔线多少？对我来说，这仍然是一种解决方法，而不是真正的解决方案。对不起。

【解决方案3】：

我不确定它是否适合您，但我已经在其他问题中读到过这个问题（不记得在哪里）。 Firefox 的这些差距似乎与anti-aliasing 有关。如果你添加到你的css这个，

polygon{
  shape-rendering: crispEdges;
}

您将以一致的方式消除差距（这意味着您将获得与其他浏览器相同的结果）。不幸的是，这也意味着你的对角线变得更丑了（也是以一致的方式）。

【讨论】：