Chrome / Firefox 在父级使用绝对定位时不一致

Question

我有一张带有圆形图标的地图。

我正在使用空 canvas 元素来保持圆形容器的 1:1 纵横比

在 Chrome67 中查看时一切正常，但在 Firefox 60 中不起作用，宽高比不保留且图标的内容宽度为零（只有它们的填充使它们可见）如果父级 (.zone) 具有 position:absolute，则会发生这种情况，但是当 .zone 具有 position:relative.

时它会起作用

我真的需要 position:absolute，有人知道为什么 firefox 不扩展 .item 的宽度来适应 canvas 元素吗？

* {
  margin: 0;
  box-sizing: 0;
}

.zone {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 5%;
  bottom: 5%;
  background: grey;
}

.item {
  position: absolute;
  transform: translate(-50%, -50%);
  height: calc(100% / 11);
  border-radius: 50%;
  z-index: 3;
  overflow: hidden;
  cursor: help;
  border: 1.5px solid #0acaff;
  color: #0acaff;
}

.item canvas {
  height: 100%;
}

.square_content {
  background: red;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 5px;
}

<div class="zone">
  <!-- inline style is computed -->
  <div class="item" style="left: 22.727%;top: 77.273%;">
    <canvas width="1" height="1"></canvas>
    <div class="square_content">
    </div>
  </div>
</div>

注意：在该代码段中，您应该主要看到带有完美圆形图标（蓝色边框和红色背景）的灰色区域

Answer 1

问题在于 height: calc(100% / 11); 如果您更改 [=30]，它的值不会在 Firefox =]% 到 vw 您的代码可以正常工作。

给你的示例代码：

* {
  margin: 0;
  box-sizing: 0;
}

.zone {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 5%;
  bottom: 5%;
  background: grey;
}

.item {
  position: absolute;
  transform: translate(-50%, -50%);
  height: 4vw;
  /* or height: calc(40vw/11); */
  border-radius: 50%;
  z-index: 3;
  overflow: hidden;
  cursor: help;
  border: 1.5px solid #0acaff;
  color: #0acaff;
}

.item canvas {
  height: 100%;
}

.square_content {
  background: red;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 5px;
}

<div class="zone">
  <!-- inline style is computed -->
  <div class="item" style="left: 22.727%;top: 77.273%;">
    <canvas width="1" height="1"></canvas>
    <div class="square_content">
    </div>
  </div>
</div>

以上示例适用于所有浏览器，希望对您有所帮助。

Chrome / Firefox 在父级使用绝对定位时不一致

Chrome / Firefox inconsistent when parent is positioned with absolute

css

firefox

cross-browser