JQuery和CSS風格之間的行高不一致

Question

這是遊戲的一小部分，但上下文並不重要。在一個正方形div中，我想對齊垂直單個字符。我可以嘗試其他方法來做到這一點，但我想了解這段代碼中的錯誤。

在Android模擬器上一切正常，在我的智能手機（HTC M7）上，字符更接近頂端。 GENERATED FROM JS

HTML

<div class="card" style="width: 23%; height: 23%; left: 0%; top: 0%; font-size: 12.5vw; line-height: 63.75px;"> 
    <i class="fa fa-bell"></i> 
</div> 

CSS - 定義SQUARE DIV

#memory-game .card { 
    position: absolute; 
    width: 20%; /* THIS IS DINAMICALY RECALUCLATED FROM JS */ 
    height: 20%; /* THIS IS DINAMICALY RECALUCLATED FROM JS */ 
    margin: 1%; 
    overflow: hidden; 
    background-repeat: no-repeat; 
    background-color: #9e6186; 
    color: #ffffff; 
    overflow: hidden; 
    font-size: 1.8em; /* THIS IS DINAMICALY RECALUCLATED FROM JS */ 
    text-align: center; 
} 

    #memory-game .card:after { 
    display: block; 
    content: ""; 
    padding-bottom: 100%; 
} 

這是一個點擊事件僅用於調試

// SET LINE-HEIGHT WORK, IS VISIBLE ON THE INLINE STYLE ATTRIBUTE (image below) 
$('#memory-game .card').css('line-height', $('#memory-game .card').height() + 'px'); 

// DEBUG VALUES 
var height = $('#memory-game .card').height(); 
var lineHeight = $('#memory-game .card').css('line-height'); 
var style = $('#memory-game .card:first').attr('style'); 

navigator.notification.alert(
    'height: ' + height + '/line-height: ' + lineHeight + '/style: ' + style, // message 
    function() { },                // callback 
    'INFO',                   // title 
    'close'                   // buttonName 
); 

JQuery在樣式上設置的線高度減少了15％的線高度（具有更大的網格，高度和線高度的值也小於15％）。

JQuery返回計算的樣式，這很好，事實上JQuery絕對是正確的！角色不對齊，但爲什麼呢？怎麼了 ？？

謝謝

編輯

這是設備上的DOM檢查......這似乎是一個錯誤，如果有人有一個更好的解釋...

Answer 1

它的錯誤，由字體提升導致的webkit錯誤。 https://bugs.webkit.org/show_bug.cgi?id=84186