[兼容性]WebKit中MARQUEE元素behavior属性值为alternate时跑马灯效果消失的解决办法

杰拉斯 | 时间：2012-07-25, Wed | 22,486 views
前端开发　

问题描述

MARQUEE 标记中存在 "behavior" 值为 "alternate" 时，MARQUEE 标记内的处于普通流中块元素的交替往复移动效果消失。

在 Chrome Safari 中 MARQUEE 标记失效。

Chrome Safari

MARQUEE 不属于 W3C 规范中的元素，它最初由 IE2.0 引入，然而目前它以成为事实标准，所有浏览器均支持 MARQUEE 元素。

参考 MSND BEHAVIOR Attribute | behavior Property 中的相关说明。

参考 Mozilla Developer Center marquee 中的相关说明。

参考 Safari Reference Library Attribute behavior 的相关说明。

分析以下代码：

<marquee width="500" behavior="alternate">
	<div style="width:50px; height:50px; background:black;"></div>
</marquee>

代码中 MARQUEE 标记使用了 behavior="alternate" 属性值，期望内部的 DIV 块元素可以交替反复移动。

但在 Chrome Safari 中会失去 MARQUEE 效果。

如果将其内 DIV 标记的 'display' 值变更为 'inline' 或 'inline-block'，抑或加入 'float:left' 样式，均可以重新获得 MARQUEE 效果，如：

<marquee width="500" behavior="alternate">
	<div style="width:50px; height:50px; background:black; float:left;"></div>
</marquee>

这些样式属性修改最终影响的是块级标记的实际宽度，虽然之前 DIV 标记已经被设置了远远小于容器 MARQUEE 的宽度，实际上在 Webkit 内核浏览器中并没起到作用，MARQUEE标记依然认为其内部容器的宽度与它相同，交替反复移动效果无法支正常体现出来。

直到其子容器的显示样式被修改为非块级元素或进入浮动流重新计算了子容器宽度后，MARQUEE 标记才认为其内部空间足够子元素做交替反复移动，此时运动效果立现。

在 MARQUEE 标记内避免使用普通流中的块级元素，或用脚本程序模拟 MARQUEE 标记的效果。

转自：W3Help

如需转载请注明出处：杰拉斯的博客