'em' 中的 HTML 选取框标签宽度表现得很奇怪答案

【问题标题】：HTML marqee tag width in 'em' behaves weird'em' 中的 HTML 选取框标签宽度表现得很奇怪
【发布时间】：2014-08-16 11:09:04
【问题描述】：

Marquee 是html 中最讨厌的标签之一，这种仇恨可能要追溯到 90 年代，当时每个人都有自己的网页，每个人都滥用这个标签。

在我作为兼职网页设计师的这些年里，我发现这个标签对于一些技巧非常有用。 “缺乏兼容性”只是对IE 方式的宣传（TBH，我也不喜欢IE），因为据我的测试证实，最新版本的IE、FF、@ 987654330@、Safari和Chrome支持。

不过，我的代码有问题：

<html>
 <head>
  <title>
  </title>
  <style type="text/css">
   body, marquee {font-family: courier new; font-size: 30}
   marquee {width: 10em}
   span {background-color: #008000};
  </style>
 </head>
 <body>
  <marquee bgcolor="#800000" direction="left" behavior="slide"><span>1234567890</span></marquee><br>
  12345678901234567890<br>
 </body>
</html>

整个文档使用相同的字体和大小，marquee 元素的宽度明确设置为 10em（是的，当你增加数字时它会变长，是的，当你删除 @987654335 时它是像素小@)。无论您放什么值，marquee 的宽度都是该值的 160%。

编辑：我的问题可能含糊不清并引起一些混乱。绿色条应滑入并完全覆盖红色背景。 marquee 和滑动 span 都应该是 10 个字符宽（marquee 不是，这就是问题所在）。

分析了来自 cale_b 的非常有用且详细的答案，我得出的结论是，我的浏览器将 width: 1em 解释为“此元素的宽度是当前正在使用的字体的一个高度”。由于大多数字体使用黄金比例来表示宽度/高度比例，我假设这就是为什么我的长度增加了 160% (gr=1.61803)。

你同意我的结论吗？你知道如何让这两个元素的字符宽度相同吗？

【问题讨论】：

"2 行纯 html" 嗯不，不是
为什么说长话短说，你能把它简写成问题吗，还有一个 jsfiddle 或其他东西会很好..
您是否假设 (a) 10em 必须正好是 10 个字符宽，并且 (b) 它只是搞砸的选框？这是一个侯爵+一个10em-wide div，宽度相同。 codepen.io/paulroub/pen/rdqIc
这不仅仅是“缺乏兼容性”，标准明确指出这是一个“过时”、“不合格”的功能。w3.org/TR/html5/obsolete.html#obsolete
@PeeHaa 好的，html + css。有效行数：marquee {width: 10em}<marquee bgcolor="#800000" direction="left" behavior="slide"><span>1234567890</span></marquee>@Ronni Skansing jsfiddle.net/FWWEn - 那是多少行？顺便说一句，我正在使用嵌入式系统，每个保存的字节都很重要（所以你不会在很多层面上误会我的意思）

标签： html css internet-explorer styles width

【解决方案1】：

我没有发现选框太宽的证据。

鉴于您提供的标记，默认字体大小为 16px，这将导致 1em 等于 16px（因此 10em 等于 160px）。

这里有一篇关于这个主题的精彩文章：http://css-tricks.com/css-font-size/

这是一个小提琴，它演示了 10em 处的 marqee 与相同宽度的 div 的宽度相同假设它们应用了相同的字体大小。注意我已经更新它以反映 20px 的字体大小以进行演示。

Fiddle

但是，我确实发现 css 和标记存在一些问题：

您的 html 中有额外的结束 </td> 标签。这表明您可能正在使用表格进行布局，我强烈建议您不要这样做。

font-size: 30 上没有单位 - 应该是像素、ems、点还是？？

编辑：
您得出的结论是正确的 - 1em 等于字体大小的 height，而不是字体大小的 width。所有浏览器都是如此。

为了获得所需的宽度，您需要确定字体宽度和高度之间的比例（正如您已经暗示的那样）。注意不同的字体可能有不同的比例。

另一种方法是在跨度和选取框上设置宽度，并使用另一种技术（例如 text-align: center）使其看起来不错。

【讨论】：

我很抱歉</td>，是的，这是更大数据表的一部分。（= 不用于页面格式）div 可以做更多的表格，并且更规范，但是当您需要一个可以扩展并填充父级可用高度的其余部分的元素时，它们会失败。 font-size 只是一个快速检查，以确保所有元素使用相同的字体大小。我知道我没有单位，但是让我们说它的 4pt 或其他什么对测试无关紧要。最后，你的小提琴给了我同样超大的marquee（div 也有同样的错误宽度）
@Ulrik - 由于您的字体大小是无单位的，因此无法正确解析，因此使用了 16px 的默认字体大小，这将正确导致 1em = 16px（和 10em = 160px ）。我已经更新了问题和小提琴来证明这一点，并提供了更多信息。
你的意见很有帮助，我编辑了我的主要问题，所以请告诉我你的想法。
再一次，看来我的问题用了错误的方式。在marquee 开始之前，应该有一个10 个字符宽的红色矩形。当东西滑入时，应该有一个 10 个字符宽的绿色矩形（其中包含文本“1234567890”），它完全覆盖了红色区域。不是这样的：imgur.com/GKKxVgF
@Ulrik - 不，我明白了。答案解决了这个问题，试图让你的跨度和你的选框宽度相同。

【解决方案2】：

好的，让我们完全忘记marquee。

看看这个：

<html>
 <head>
  <title>
  </title>
  <style type="text/css">
   body {font-family: courier new}
   div  {background-color: #008000}
  </style>
 </head>
 <body>
  This div has width of 10em (ten characters):<br>
  <div style="width: 10em">1234567890</div><br>
  This div contains 10 characters, and is set to be an inline element:<br>
  <div style="display: inline">1234567890</div><br><br>
  They should look the same, don't you think?
 </body>
</html>

我的假设是我的浏览器将width: 1em 解释为“此元素的宽度是当前正在使用的字体的一个高度”，并且由于大多数字体使用黄金比例作为宽度/高度比例，我没有更好的解释这两个绿色div 的宽度处于黄金比例 - 1：1.61803。

【讨论】：