top/bottom:[%] 基于父元素的边框而不是高度
[英]top/bottom:[%] based on parent element's borders instead of height
问题描述
我在使用 top:[%] 定位子元素时发现了一个奇怪的行为。 在 mobile-safari 上，给定足够大小的顶部/底部边框，行为似乎发生了变化：不是将百分比应用于父级的height ，而是应用于父级的边框（加上一点额外的）。
以下代码重现了该错误：
.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。 这是它的样子：
其他详情：
- 当父项的垂直边界之和为其高度的 98% 或更多时，该错误似乎开始了。
- 子元素不必是 div，它可以是图像。
- 如果孩子有
position:absolute，则该错误不会出现。
我是唯一一个看到这个的人吗？ 是否记录在某处？
转载于以下：
- iPhone XS Max 12（browserstack.com 上的真实设备）
- iPad 迷你 iOS 9
- iPhone8，Safari 13.6（在 lamdatest.com 上模拟）
1 个解决方案
解决方案1
0 已采纳 2020-11-30 11:04:06
在某些版本的 IOS 上，相对放置的元素会根据边框的宽度垂直移位。 这没有在运行 Safari IOS14 的 iPad 上显示，但在运行 ZBA3F2ZADEA47BE86B2D 的迷你 iPad 上显示。
这似乎是至少某些 IOS 版本中的错误。
一种解决方法可能是将边框放入父级的伪元素中。 这个片段然后在迷你 iPad 上的 IOS 9 上工作：
<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>
在元素内部为底部\\左侧创建边框，为顶部\\ rigth创建边框
[英]Making borders for bottom\left on the inside of an element, none for top\rigth
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.