Css 铬不'；t降低父级字体大小时，缩小em值 问题

这是原始的DOM元素。它在Firefox和Chrome上显示相同

这就是当其父元素的字体大小设置为0.6em时，该元素在Firefox 36.0.1上的显示方式。这已正确地缩小到60%

这就是当其父元素的字体大小设置为0.6em时，该元素在Chrome 41.0.2272.104上的显示方式。有些东西似乎缩小到60%，而其他东西则保持不变。这是不正确的。如何使Chrome的行为与Firefox相同

背景 我的网站设置为使1em等于10px

body {
 font-size: 62.5%;
}

我使用em单位来确定任何我想轻松缩放的对象的大小。我知道使用em是一门逐渐消失的艺术，但我仍然认为它是缩放复杂DOM对象最简单的方法——您所需要做的就是更改其父对象的字体大小，然后所有子对象都会被缩放

在我的特殊情况下，当屏幕变小时，我需要元素看起来是其原始大小的60%。因此，我更改了其父级的字体大小：

@media (max-width:960px) {
    #pageLanding {
        font-size: 0.6em;
    }
}

这是元素的CSS：

.downloadApp {
    display: block;
    border: 2px solid #000;
    border-radius: 0.8em;
    background: #fff;
    color: #000;
    width: 36em;
    height: 10.8em;
    text-align: left;
}   
    
.downloadApp:hover {
    color: #fff;
    background: #000;
}   
     
    .downloadApp i {
        float: left;
        font-size: 8em; 
        margin: 0.1em 0 0 0.4em;
    }
    
    .downloadApp div {
        margin: 1.6em 0 0 12em;
    }   
        
        .downloadApp div p {
            font-size: 2em;
        }
        
        .downloadApp div strong {
            font-size: 4em;
        }

这是HTML。我用来显示Android机器人的矢量版本

<div id="pageLanding">
    <p>Other stuff that needs to be scaled too</p>
    <p>More stuff</p>
    <a href="example.org" class="downloadApp">
        <i class="fa fa-android"></i>
        <div>
            <p>Get it on</p>
            <strong>Google Play</strong>
        </div>
    </a>
</div>

其他需要扩展的东西

更多的东西

Chrome的最小字体大小为6px。这将相当于我的设置中的0.6em，这正是我尝试使用的。过去，人们建议通过以下方式消除这一限制：

* {
    -webkit-text-size-adjust: none;
}

但Chrome在最近的版本中不再支持这一点。只有iOS Safari仍然支持这一点

解决方案是使元素的默认大小变小。然后你会增加它的字体大小，使它更大。这与我所做的正好相反。在我的例子中，我的默认大小很大，需要缩小

  1 .downloadApp {
  2     display: block;
  3     border: 2px solid #000;
  4     border-radius: 0.4em;
  5     background: #fff;
  6     color: #000;
  7     width: 9em;
  8     height: 2.7em;
  9     text-align: left;
 10 }
 11 
 12 .downloadApp:hover {
 13     color: #fff;
 14     background: #000;
 15 }
 16 
 17     .downloadApp i {
 18         float: left;
 19         font-size: 2em;
 20         margin: 0.15em 0 0 0.4em;
 21     }
 22 
 23     .downloadApp div {
 24         margin: 0.4em 0 0 3em;
 25     }
 26 
 27         .downloadApp div p {
 28             font-size: 0.5em;
 29         }
 30 
 31         .downloadApp div strong {
 32             font-size: 1em;
 33         }

通过使字体大小大于1.0em使其变大：

 22 .downloadApp {
 23     font-size: 4.0em;
 24 }