为什么 Firefox Mobile（仅在 Android 上）显示相同的字体大小不同，尽管类相同？答案

【问题标题】：Why does Firefox Mobile (on Android only) show the same font sizes differently despite the same classes?为什么 Firefox Mobile（仅在 Android 上）显示相同的字体大小不同，尽管类相同？
【发布时间】：2014-11-27 17:34:42
【问题描述】：

必须在 Android 上的 Firefox 中查看才能看到问题

以下代码应该使所有文本大小相同，但在 Firefox Android 上，中间框文本显示得更大：

在 Firefox ANDROID 中查看：http://jsfiddle.net/90aoz69L/embedded/result/

（查看代码，这里是：http://jsfiddle.net/90aoz69L/）

<link href="http://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" type="text/css" />
<div class="boxes">
    <div class="box">
        <div class="boxInfo">
            <div class="boxTitle">Title 1</div>
            <div class="boxDescription">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard d</div>
        </div>
        <img src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg" class="boxImage">
    </div>
    <div class="box">
        <div class="boxInfo">
            <div class="boxTitle">Title 2</div>
            <div class="boxDescription">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and</div>
        </div>
        <img src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg" class="boxImage">
    </div>
    <div class="box">
        <div class="boxInfo">
            <div class="boxTitle">Title Number Three</div>
            <div class="boxDescription">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'</div>
        </div>
        <img src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg" class="boxImage">
    </div>
</div>

.boxes
{
    position: relative;
    margin-top: -13px;
}

.box
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 919px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 15px;
    padding-bottom: 15px;
    background-color: #f2f2f2;
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.boxInfo
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 701px;
    float: left;
    overflow: hidden;
}

.boxTitle
{
    font-family: Roboto, Arial, Helvetica;
    font-size: 21px;
    color: #ba2219;
}

.boxDescription
{
    margin-top: 4px;
    font-family: Roboto, Arial, Helvetica;
    font-size: 14px !important;
    line-height: 21px;
    color: #6d6d6d;
}

.boxImage
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 203px;
    margin-left: 15px;
    float: left;
}

为什么会这样？

【问题讨论】：

标签： android html css firefox

【解决方案1】：

找到解决方案：

-moz-text-size-adjust: none;

http://jsfiddle.net/90aoz69L/1/embedded/result/

这是由于 Firefox 在移动设备上处理字体大小的方式存在错误：https://bugzilla.mozilla.org/show_bug.cgi?id=707195

【讨论】：