字幕之谜

Question

在玩马戏团时，我遇到了以下奇怪的行为;

示例A

• http://jsfiddle.net/swafe/

  <marquee behavior="alternate" direction="down" width="100%" height="200px"     behavior="alternate" style="border: none; font-size:200px;">
      <marquee behavior="alternate">
          This text will bounce
      </marquee>
  </marquee>
  

例B

• http://jsfiddle.net/5JQMk/

  <marquee behavior="alternate" direction="down" width="100%" height="300px" behavior="alternate" style="border: none; font-size:200px;">
      <marquee behavior="alternate">
          This text will bounce
      </marquee>
  </marquee>
  

---

问题

为什么示例A中的文本在每个方向上移动，而在示例B中，我所有改变的是元素的高度，文本不再上下移动而只在x轴上移动？

---

声明

• 我无意使用选框来做任何有价值的事情。

Answer 1

编辑：这似乎是Chrome中的“错误？”。像你期望的那样在IE中运行。

无论出于何种原因，只有当内容的高度高于behavior="alternate"的高度时，direction="down"和marquee的组合才会移动：

内容完全符合（无垂直移动）：

http://jsfiddle.net/5JQMk/3/

内容大1倍：

http://jsfiddle.net/5JQMk/4/

但是真的...... 不要使用选框 ...

Answer 2

似乎如果font-size比28.7%的高度marquee小font-size，则文字不会在选框内交替方向。

我只用这个例子进行了测试：http://jsfiddle.net/5JQMk/5/

要重申，这仍然不是那么精确，如果71.2875%是marquee高度的marquee，它将不会交替方向，而是从左向右移动

  

[容器] - [字体大小] - [容器百分比]

     

200 - 143 - 71.50％

     

300 - 213 - 71.00％

     

400 - 285 - 71.25％

     

500 - 357 - 71.40％

     

平均百分比= 71.2875％

     

圆满完美= 71.3％

为什么会这样？我不知道。 @James Montagne有一个有趣的想法。

但是{{1}}是愚蠢的，非常愚蠢的，如此愚蠢甚至W3C说你不应该使用它。我很想知道你为什么这么彻底地测试它......