Question

我很难理解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>

这似乎可以在IE，FF和Chrome中正确缩放，当我更改 body {font-size：100％; 到任何其他百分比。

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

在字体VS宽度上使用em

3 个答案: