Question

我在Android WebView中遇到了一个非常奇怪且令人讨厌的渲染错误。我已经在计算机和手机上的许多其他浏览器中对此进行了测试，它可以实现预期，但不是在WebView中。

蓝色框应与标题（30px）的高度相同，文本垂直居中于其中，而是呈现为25px。我发现的唯一没有任何意义的修复方法是，只在Android WebView上将蓝框的行高设置为35px，但这是一个可怕的黑客。

css

body { margin: 0; }

#header {
    height: 30px;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#button {
    float: right;
    line-height: 30px;
    background-color: blue;
    color: wheat;
    vertical-align: middle;
}

HTML

<body>
    <div id="header>
        <div id="button"></div>
    </div>
</body>

Answer 1

这是由webkit的字体提升功能引起的。实际上有一个错误分配给您的问题：Bug 84186

遇到与您相同的问题，我实际创建了一个javascript library，尝试自动解决问题。但要注意，它仍处于BETA状态。

Android WebView css行高渲染错误

1 个答案: