【问题标题】：Chrome doesn't scale down em value when lowering the font-size of the parent降低父级的字体大小时，Chrome 不会缩小 em 值
【发布时间】：2015-03-25 19:55:40
【问题描述】：

问题

这是原始的 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。我使用Font Awesome 来显示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>

【问题讨论】：

标签： css google-chrome em

【解决方案1】：

Chrome 的最小字体大小为 6 像素。这相当于我的设置中的 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 }

【讨论】：