在Nexus 7 Chrome上计算的字体大小与CSS字体大小不同

Question

我有一些CSS和HTML，其中font-size被明确地设置为13px，并且大部分都保持这种方式，但有时候Nexus 7上的Chrome有时会显示14px的同一页面的一部分;

不幸的是，我无法在jsfiddle中重新创建问题，所以我不确定发生了什么。

在我尝试在http://jsfiddle.net/K9hyG/2/重新创建问题时，可以看到我用来影响font-family和font-size的样式。

使用Chrome调试器时，我可以在Computed Style中看到以下其中一个有问题的段落：

border-collapse: separate;
color: rgb(51,51,51);
display: block;
font-family: Optima, Lucia, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif;
font-size: 14px;
    font[size="2"] - 13px   default.aspx:427
    body - 13px             default.aspx:2
height: 36px;
text-align: left;
text-shadow: rgb(255,255,255) 0px 1px 0px;
width: 877px;

text-shadow是由我使用jQuery Mobile生成的。在Chrome调试器中，会出现text-shadow指令的两个实例。一个继承自div.ui-page.ui-body-c.ui-page-active（ui-body-c是激活组件），另一个来自body.ui-mobile-viewport.ui-overlay-c，（ ui-overlay-c是激活组件），但两个定义来自主题文件中CSS的相同部分。

如果我停用其中一个，有问题的段落实际上会在Chrome调试器中更改为13px，但在设备上看起来仍然相同。如果它们在Chrome调试器中都已停用，则会返回到14px。即使文本阴影设置为rgb(255,255,255) 0px 0px 0px。

，这仍然会发生

我见过this post，但这个问题基本上没有得到解决。

Answer 1

我的一位同事发现了答案。看起来我是Font Boosting

的不知情的受害者

根据链接，可以通过在相关元素上提供max-height: 1000000px或在body, body *上为所有元素提供字体提升功能。

Answer 2

您的问题可能是由于Chrome的文字缩放设置，出于辅助功能的原因，该设置会以特定比例设置文字。许多用户使用这种方法很难在手机上阅读小文本。您无法解决此问题，也不应尝试解决此问题，尤其是对于支持移动设备的网站。

我建议您忽略它或修改CSS，以便它支持略有不同的文字大小。

Answer 3

经过一些测试后，这条规则帮助了我。必须添加到包含提升文本的元素或其父级，具体取决于div / table结构。

element or parent element { 
    /* prevent font boosting on mobile devices */
    width: 100%;
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

可能必须根据您的需要更正宽度和高度值。