Question

我在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;
}

我检查了Text Scaling是100％。它是华硕Nexus 7的错误吗？有可能使它14px？在iPad和三星Galaxy Tab上一切正常。

更新20.11.2012：

我提出了建议的更改，但他们没有帮助。 JavaScript中的代码的工作方式如下：

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

更新20.11.2012＃2

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

CSS：

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

在应用此类之前，字体大小为14px，但在此之后，它增加到18px或22px。有时它工作正常。我在iPad和三星Galaxy Tab上检查过它，它运行正常。

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

Answer 1

这可能与Font Boosting有关。

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

或者，提供

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

在整个页面上禁用字体提升。

Answer 2

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

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

Chrome accessibility options

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

Answer 3

没有CSS代码就很难回答。

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

您也可以在css规则中使用！important“强制”使用属性：

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

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

Answer 4

！重要标志对我的情况没有帮助（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;

Answer 5

如果您遇到字体提升问题，可能需要检查视口是否已在元数据中设置：

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

Answer 6

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

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

但是设置设置为7像素，您的字体大小永远不会小于7像素。

计算出的字体大小比华硕Nexus 7中CSS定义的大

更新20.11.2012：

更新20.11.2012＃2

6 个答案: