降低父级的字体大小时，Chrome不会缩小em值

Question

问题

这是原始的DOM元素。它在Firefox和Chrome上看起来是一样的。

当其父级的font-size设置为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>

Answer 1

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 }