Question

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

在我兼职网页设计师工作期间，我发现这个标签对某些技巧非常有用。＆＃34;缺乏兼容性＆＃34;只是针对IE方式的宣传（TBH，我也不喜欢IE），因为，就我的测试确认，IE的最新版本，FF，Opera，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（是的，当你增加数字时它变得更长，是的，当你删除它时它是像素微小的em）。无论你放在什么价值，marquee的宽度将是该值的160％。

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

从cale_b分析非常有用和详细的答案，我得出的结论是我的浏览器将width: 1em解释为＆＃34;此元素的宽度为当前正在使用的字体的一个高度＆＃34;。由于大多数字体使用黄金比例作为宽度/高度比例，因此我认为这是我长度增加160％（gr = 1.61803）的原因。

您是否同意我的结论？您是否知道如何使这两个元素的字符宽度相同？

Answer 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）使其看起来很好。

Answer 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。

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

2 个答案: