iOS設備上的100％高度不起作用

Question

我在html中繪制一條垂直線，如下所示：

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

 <hr class="vr-long"> 

這適用於每台設備（PC，Android）和每個經過測試的瀏覽器，除了我的ipad上的所有瀏覽器（iphone未經過測試）。 在我的ipad上，所有垂直線都消失了。 問題似乎是“身高：100％;” 因為當我使用height: 50px; 例如，我得到了那條垂直線。

任何想法如何獲得height: 100%在iOS上工作？

順便說一下：當我使用img-tag通過使用repeat-y和height繪制垂直線時出現同樣的問題：100％......

Answer 1

我通過使用div作為垂直lign解決了這個問題。

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

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

我仍然不知道為什么問題只出現在我的ipad上，但是workaorund並沒有造成任何問題。