top/bottom:[%] 基于 parent 元素的边框而不是高度

Question

我在使用 top:[%] 定位 child 元素时发现了一个奇怪的行为。在 mobile-safari 上，给定足够大的 top/bottom 边框，行为似乎发生了变化：而不是将百分比应用于 parent 的高度，它应用于 parent 的边框（加上一点额外）。

以下代码重现了错误：

.parent {
  position: relative;
  border-bottom: 200px;
  border-style: solid;
  height: 100px;
  
  width: 100%;
}

.normal {
  position: absolute;
  top: 10px;
  
  width: 50%;
  background-color: blue;
}

.defective {
  position: relative;
  top: 10%;
  
  width: 50%;
  left: 50%;
  background-color: red;
}

* {
  /*style reset*/
  margin: 0;
  border: 0;
}

<body>
  <div class="parent">
    <div class="normal">
      <p>The top is 10px</p>
    </div>
    <div class="defective">
      <p>I should be at the same height</p>
    </div>
  </div>

在这个例子中，顶部应该是 10px，但是当我检查元素时，它实际上是 20.3px。这是它的样子：

其他详情：

当 parent 的垂直边框总和达到其高度的 98% 或更多时，该错误似乎会出现。
child 元素不必是 div，它可以是图像。
如果 child 有 position:absolute，则该错误不会出现。

只有我一个人看到吗？是否记录在某处？

转载于以下：

iPhone XS Max 12（browserstack.com 上的真实设备）
iPad迷你iOS9
iPhone8，使用 Safari 13.6（在 lamdatest.com 上模拟）

Answer 1

相对放置的元素在某些版本 IOS 上根据边框的宽度垂直移动。这没有在 iPad 运行 Safari IOS14 上显示，但在迷你 iPad 运行 IOS 9.

上显示

这似乎是至少某些 IOS 版本中的错误。

解决方法可能是将边框放入父级的伪元素中。这个片段然后在 IOS 9 上工作 iPad:

<style>
.parent {
  position: relative;
  height: 100px;
  
  width: 100%;
}
.parent::before {
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 border-bottom: 200px;
 border-style: solid;
}
.normal {
  position: absolute;
  top: 10px;
  
  width: 50%;
  background-color: blue;
  
  rdisplay: none;
}

.defective {
  position: relative;
  top: 10%;
  
  width: 50%;
  left: 50%;
  background-color: red;
}

* {
  /*style reset*/
  margin: 0;
  border: 0;
}
</style>
<body>
  <div class="parent">
    
    <div class="defective">
      <p>I should be at the same height</p>
    </div>
    <div class="normal">
      <p>The top is 10px</p>
    </div>
  </div>

top/bottom:[%] 基于 parent 元素的边框而不是高度

top/bottom:[%] based on parent element's borders instead of height

html

css

mobile-safari

ios-simulator