html - iOS 设备上的 100% 高度不起作用

Question

我在 html 中画一条垂直线是这样的:

.vr-long {
  background: #000000;
  border: none;
  width: 1px;
  height: 100%;
}

<hr class="vr-long">

除了我的 ipad 上的所有浏览器(iphone 未测试)外，这在所有设备(PC、Android)和所有经过测试的浏览器上都运行良好。在我的 ipad 上，所有垂直线都消失了。问题似乎是“高度:100%；”因为当我使用 height: 50px; 时，我得到了那条垂直线。

关于如何让 height: 100% 在 iOS 上工作有什么想法吗？

顺便说一句:当我使用 img-tag 通过使用 repeat-y 和高度来绘制垂直线时出现同样的问题:100% ...

Answer 1

我通过使用 div 作为垂直 lign 解决了这个问题。

.vr-long {
  margin: 0 2em 0 2em;
  border: 1px solid #000000;
}

<div class="vr-long"></div>

我仍然不知道为什么这个问题只出现在我的 ipad 上，但是那个 workaorund 没有引起任何问题。