Question

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

我正在使用空的画布元素在圆形容器上保留1：1的长宽比

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

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

* {
  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>

以上示例工作将在所有浏览器中进行，希望对您有所帮助。

当父级与绝对位置时，Chrome / Firefox不一致

1 个答案: