父元素和svg之间的幻像空间

Question

我正在进行一个项目，并且遇到了父元素和内部包含的SVG的奇怪错位。

浅蓝色斑点是<whole-rest>元素所在的铬位置，而其下方的黑色矩形是<svg>

内的<whole-rest>

HTML

<measure>
  <svg style="width: 100px;">
    <line stroke="black" stroke-width="2" x1="0" y1="10" y2="10" x2="100"></line>
    <line stroke="black" stroke-width="2" x1="0" y1="20" y2="20" x2="100"></line>
    <line stroke="black" stroke-width="2" x1="0" y1="30" y2="30" x2="100"></line>
    <line stroke="black" stroke-width="2" x1="0" y1="40" y2="40" x2="100"></line>
    <line stroke="black" stroke-width="2" x1="0" y1="50" y2="50" x2="100"></line>
  </svg>
  <whole-rest>
    <svg>
      <rect height="5" width="10" fill="black"></rect>
    </svg>
  </whole-rest>
  <single-barline>
    <svg>
      <line stroke="black" stroke-width="1" x1="0" x2="0" y1="0" y2="40"></line>
    </svg>
  </single-barline>
</measure>

CSS

measure {
  height: 60px;
  float: left;
  display: inline-block;
  position: relative;
}

measure > svg {
  height: 60px;
}

whole-rest {
  height: 5px;
  width: 10px;
  position: absolute;
  top: 22px;
  left: 50%;
  margin-left: -5px;
}

whole-rest > svg {
  height: 5px;
  width: 10px;
}

此外，如果重要的是我使用Eric Meyers 2.0 CSS重置，浏览器就是Chrome。

我已尝试将whole-rest设置为display:block并且还与overflow混淆，因为有时这些可以帮助处理浮动/恶意商品。

没有元素有任何边距或填充（margin-left: -5px上的whole-rest除外，以绝对定位为中心元素。

Answer 1

将position: absolute;添加到.whole-rest > svg { ... }