在字体 VS 宽度上使用 em答案

【问题标题】：Using em on font VS width在字体 VS 宽度上使用 em
【发布时间】：2013-04-29 18:54:15
【问题描述】：

我无法理解 em 在 CSS 中的工作方式。我试图让一个元素（在本例中为 div）以与字体相同的方式进行缩放。我已尽可能缩小我的问题陈述范围。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style>
      body { font-size: 100%; }
      .EventReg {
        border:solid #000000 .063em;
        background-color:#000000;
        padding:.625em;
        width:13.65em;
      }
    </style>
  </head>
  <body>
    <div style="font-size:2em;">Event Registration</div>
    <div class="EventReg"></div>
  </body>
</html>

当我更改 body { font-size: 100%; 时，这似乎在 IE、FF 和 Chrome 中正确缩放} 到任何其他百分比。

我期待的是我在计算机浏览器中看到的 div 和文本的长度完全相同。但是，当我用我的 android 智能手机检查时，文本比 div 宽很多。

我希望文本下的 div 与文本的宽度相同，即使它已缩放。

任何想法我做错了什么或我的假设是错误的？

【问题讨论】：

看看this post ，我前几天回答了，正是你想知道的。简而言之：如果您不先指定像素字体大小，那么“em”所代表的结果就不容易预测。
我尝试了以下方法，但没有成功：html { font-size: 16pt; }, html { 字体大小：16px; }, 正文 { 字体大小：16pt; }, 正文 { 字体大小：16px; }。这可以在计算机浏览器上正确缩放，但不能在手机上正确缩放。
这太糟糕了......在那种情况下，我真的对这个问题的解决方案很感兴趣......

标签： html css width font-size em

【解决方案1】：

这可能与-webkit-text-size-adjust 属性有关。尝试将以下样式添加到您的 CSS。

* {
  -webkit-text-size-adjust:100%;
}

在某些手机上，浏览器会调整字体大小以使网站更具可读性。将该属性设置为 100%（或可能的 none）应该可以防止这种情况发生。

【讨论】：

我已经尝试过 -webkit-text-size-adjust:100% 和 -webkit-text-size-adjust:none;但不会改变结果。谢谢。
在那种情况下，我认为 Jukka 的回答可能会更有帮助。由于默认字体不同，您可能会在桌面浏览器和移动设备之间看到不同的结果。如果您将字体显式设置为 Arial 之类的常见字体，您可能会得到更好的结果，但即使这样也无法保证。

【解决方案2】：

没有理由期望文本和空的div 元素具有相同的宽度。文本的宽度取决于字体，并且可能在某种程度上还取决于字体渲染功能（例如字距调整）。空div 元素的宽度使用em 单元显式设置。 The em unit是字体的大小，即字体的高度；它与字母的宽度或高度没有明确的关系。

要使一个元素的宽度取决于另一个元素中某些文本的宽度，您需要表格格式或其他布局工具。在这种情况下，如果您只想要文本下方的实心矩形，您可以设置例如display: inline-block 和一个合适的 border-bottom 在包含文本的元素上。

【讨论】：

【解决方案3】：

我最终通过将文本变成图像来解决这个问题。这对我来说不是一个理想的解决方案，但它强制文本在所有设备和浏览器上都相同。

【讨论】：