css - 父级使用绝对定位时，Chrome/Firefox 不一致

Question

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

我使用空 Canvas 元素在圆形容器上保持 1:1 的纵横比

在 Chrome 67 中查看时一切正常，但在 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); 如果您更改，它的值不会在 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>

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