Question

这是游戏的一小部分，但背景并不重要。在方形div中，我想将verticaly与一个char对齐。我可以尝试其他方法来做到这一点，但我想了解这段代码中的错误。

在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 - DEFINE 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

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

1 个答案: