1

I'm having trouble with my understanding of how em should work in CSS. I'm trying to get an element (div in this case) to scale the same way the font does. I've narrowed my problem statement down as small as I can.

<!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>

This seems to scale correctly in IE, FF, and Chrome, when I change body { font-size: 100%; } to any other percent.

What I'm expecting is what I see in a computer browser the div and the text are the exact same length. However, when I check this with my android smart phone the text is quite a bit wider than the div.

I would expect the div under the text to be the same width as the text even though it's scaled.

Any ideas what I'm doing wrong or where my assumption is wrong?

4

3 回答 3

0

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

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

于 2013-05-06T05:35:30.050 回答
0

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

于 2014-08-29T15:32:23.080 回答
0

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

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

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

于 2013-05-06T03:46:17.970 回答