JQuery 和 CSS 样式之间的行高不一致答案

【问题标题】：Line-height discordant between JQuery and CSS styleJQuery 和 CSS 样式之间的行高不一致
【发布时间】：2017-05-07 16:45:36
【问题描述】：

这是游戏的一小部分，但背景并不重要。在方形 div 中，我想垂直对齐单个字符。我可以尝试其他方法来做到这一点，但我想了解这段代码有什么问题。

在 Android 模拟器上一切正常，在我的智能手机 (HTC M7) 上，字符更接近顶部。

从 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 - 定义正方形 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 检查器...这似乎是一个错误，如果有人有更好的解释...

【问题讨论】：

尝试使用css flexbox
@charlietfl 可能有很多解决方案，但我想了解为什么计算出来的 line-height 属性与内联样式上的设置不匹配。
您是否在元标记中设置了scale？提供重现问题的minimal reproducible example
这是一个很好的直觉，但不幸的是我创建了 META <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">，因为工作示例更难，但我可以尝试......

标签： android jquery html css cordova

【解决方案1】：

它是一个错误，一个由字体增强引起的 webkit 错误。 https://bugs.webkit.org/show_bug.cgi?id=84186

【讨论】：