爲什麼Firefox Mobile（僅在Android上）顯示相同的字體大小，儘管有相同的類別？

Question

這必須在Firefox中查看Android上看到問題

下面的代碼應具有的所有文本的大小相同，但在Firefox Android的，中間的框中的文本顯示大得多：

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

瓦這是怎麼回事？

Answer 1

找到了解決辦法：

-moz-text-size-adjust: none; 

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

這是由於在Firefox如何處理手機上的字體大小的一個錯誤：https://bugzilla.mozilla.org/show_bug.cgi?id=707195