计算的字体大小大于华硕 Nexus 7 上 CSS 中定义的大小答案

【问题标题】：Computed font size is bigger than defined in CSS on the Asus Nexus 7计算的字体大小大于华硕 Nexus 7 上 CSS 中定义的大小
【发布时间】：2012-11-16 12:52:50
【问题描述】：

我在 Asus Nexus 7（用 jQueryMobile 编写）上运行网页。我在 CSS 中将字体大小设置为 14px，但在调试期间（使用 PC 上的 Chrome）我可以看到它的计算大小是 22px。

HTML 代码如下所示：

<div data-role="content" class="ui-content" role="main">
    <div id="summaryContent">
        <div class="contentPanel">
            <div class="header">
                Some nice info with 14px
            </div>
            <div class="content">
                <div class="headerText">
                    Text with size of 22px (but should be 14px)
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                    <span class="dateInfo"> 30.11.2012</span>
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                    <span class="dateInfo"> 2012</span>
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                    <span class="dateInfo"> 1981</span>
                </div>
                <div class="headerText">
                    Text with size of 22px (but should be 14px)
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                </div>
            </div>
        </div>
    </div>
</div>

class="header" div 是 14px，但下一个是 22px。

CSS 代码：

.contentPanel > div
{
    padding: 10px;
    font-size: 14px;
}


.contentPanel div.header,
{
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.contentPanel div.content
{
    color: #000000;
    border-radius: 0px 0px 5px 5px;
    border-bottom: 1px solid #B5B5B5;
}

.contentPanel div.content div.element {
    padding: 10px 10px 10px 0px;
    display: inline-block;
}
.contentPanel div.content span.dateInfo {
    color: #7a7a7a;
}

.headerText {
    color: #454545;
    font-weight: bold;
}

我检查了文本缩放是 100%。是华硕 Nexus 7 的错误吗？有可能使它成为14px吗？在 iPad 和三星 Galaxy Tab 上一切正常。

2012 年 11 月 20 日更新：

我提出了建议的更改，但它们没有帮助。 JavaScript 中的代码是这样工作的：

我在 JS 中创建 HTML
然后我将这个新创建的 HTML 插入到 DOM 中
此时（在更改页面之前）在 Chrome 调试器（连接到 Nexus）中我可以看到 14px。
然后调用 jQueryMobile changePage() 并更改字体大小。

2012 年 11 月 20 日更新 #2

jQueryMobile 将类 ui-page-active 应用于 DOM 树的应该显示在屏幕上的部分。

CSS：

.ui-mobile .ui-page-active { display: block; overflow: visible; }

在应用这个类之前，字体大小是 14px，但在它之后，它会增加到 18px 或 22px。有时它工作正常。我在 iPad 和三星 Galaxy Tab 上检查过，效果很好。

有时再次进入页面会将字体大小恢复为 14px，旋转设备时也会发生类似的情况。

【问题讨论】：

请同时发布您的所有 CSS。
您可能想要显示完整的 HTML，尤其是头部使用的视口设置，或者创建一个 jsfiddle.net 示例来显示问题。

标签： html css

【解决方案1】：

这可能与Font Boosting 有关。

要禁用特定元素，请在元素、父元素或祖父元素上提供 max-height: 1000000px。

或者，提供

body, body * {
    max-height: 1000000px;
}

在整个页面上禁用字体增强。

【讨论】：

哈哈哇，你是怎么想出来的？似乎遥不可及.. 所以字体提升算法考虑了父元素的最大高度.. 这是禁用字体提升的安全方法吗？
我的 Google Fu 找到了链接的错误报告，他们在其中陈述了解决方法。这个解决方案有点笼统。在链接的错误报告中，他们说“任何大于实际高度的固定高度都可以”并且“将其设置在父块或祖父块上（但不高于该块）通常也可以工作”。设置这么大的数字意味着即使字体大小发生变化，字体提升仍然会被禁用。
谢谢@Reuben！我花了一天时间追这个 bug，直到找到你的回复。

【解决方案2】：

我发布了您的问题的潜在答案here。

您的问题可能是由于 Chrome 的文本缩放设置所致，该设置出于可访问性原因将文本设置为特定比例。许多用户都在使用它，他们难以在手机上阅读小文本。您无法解决此问题，也不应尝试解决此问题，尤其是对于支持移动设备的网站。

我建议你要么忽略它，要么修改你的 CSS，使其支持略有不同的文本大小。

【讨论】：

【解决方案3】：

没有 CSS 代码很难回答。

请查看属性是从哪里获取的，可能是从父元素继承的。您可以使用 firebug 或 Google Chrome 中的控制台（按 F12）并浏览 div。

你也可以在你的 CSS 规则中使用 !important 来“强制”使用一个属性：

.fontsize14px {
   font-size: 14px !important;
}

还要检查您是否正确编写了属性或类名。有时只是一个错字问题。

【讨论】：

不幸的是，该解决方案没有帮助。
@rdkit 为什么？你在 Firebug 中发现了什么？我看到继承不是直接的。尝试使用 .content > div 代替。看这个链接：w3.org/TR/CSS2/selector.html#child-selectors
没有帮助，请查看我插入问题的更新。

【解决方案4】：

!important 标志对我没有帮助（Windows 桌面上的 Firefox）。我的情况是由于怪癖模式。

解决方案是要么使用标准模式，要么在怪癖模式下覆盖字体继承（Fixing table inheritance in Quirks mode）

通过添加 doctype 声明来开启标准模式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或在怪癖模式下应用解决方法：

table, caption { font-size: inherit; }

同样适用于其他字体属性：

font-weight: inherit;
font-style: inherit;
font-variant: inherit;

【讨论】：

感谢您的回答，希望对某人有所帮助。不幸的是，我无法再访问此平板电脑以及出现该问题的项目，因此我无法测试该解决方案。
如果这仅发生在平板电脑上，那么我相信这并不能解决您的具体问题。我在桌面 FF 上遇到了问题，但没有一个答案能解决我的问题。
如果您的目标是桌面浏览器以支持精确设置，这就是答案。

【解决方案5】：

如果您在字体增强方面遇到问题，您可能需要检查是否在元数据中设置了视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

【解决方案6】：

Chrome 有Minimum font size 设置，它将覆盖您的CSS 样式。如果你有这种风格：

.tiny-tiny-text { font-size: 1px; }

但是设置为 7 px，你的字体大小永远不会小于 7 px。

【讨论】：