0

在玩选框时，我遇到了以下奇怪的行为；

示例 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 轴上移动？

免责声明

  • 我无意将选框用于任何有价值的东西。
4

2 回答 2

1

编辑：这似乎是 Chrome 中的“错误？ ”。如您所料，在 IE 中工作。

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

内容完全适合（没有垂直移动）：

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

内容大 1px：

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

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

于 2013-06-18T03:43:17.697 回答
1

如果大约小于. _ font-size_28.7%marquee

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

重申一下，这仍然不是那么精确，如果font-size是71.2875%的高度marquee，它不会改变方向，而是从左到右移动。

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

200 - 143 - 71.50%

300 - 213 - 71.00%

400 - 285 - 71.25%

500 - 357 - 71.40%

平均百分比 = 71.2875%

四舍五入完美 = 71.3%

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

但它marquee是愚蠢的，非常愚蠢，甚至 W3C 都说你不应该使用它。我很想知道你为什么要对它进行如此彻底的测试......

于 2013-06-18T03:55:10.553 回答