firefox下javascript设置marquee innerHTML滚动bug
在firefox下，在当前的文档流完全关闭后设置marquee标签的innerHTML（我是这样理解的，具体就不清楚firefox下marquee的机制了，看下面的示例），如果内容长度大于marquee设置的长度，会导致滚动到边界时，内容重头滚定，而没有继续滚动剩余的内容。
猜测可能是firefox文档流关闭时计算过marquee的宽度什么的，导致marquee内容宽度滚动。
示例1，在window.onload中启动一个1ms的计时器用于设置marquee标签的innerHTML，firefox下就会出现无法滚动显示所有内容，只滚动了设置的宽度的内容长度后又重新开始滚动
<style>
#dv{width:300px;background:#cccccc;margin:0px auto;padding-top:4px;}
#mq{width:150px;height:20px;background:#eeeeee}
</style>
<div id="dv">
<marquee id="mq" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" direction="left" behavior="scroll" loop="-1" deplay="0"></marquee></div>
<script>
window.onload = function () {
setTimeout(function () {//哪怕是1ms的计时器只差，firefox下内容也无法全部滚动
var mq = document.getElementById('mq')
mq.innerHTML = 'firefox下javascript设置marquee innerHTML滚动bug，内容长度大于marquee设置长度是，会导致一碰到边缘就重头开始滚动，后续未显示内容并没有滚动出来完毕后再重新开始滚动';
}, 1);
}
</script>
示例2，文档流未关闭或者直接在window.onload中设置，可对所有内容滚动
<style>
#dv{width:300px;background:#cccccc;margin:0px auto;padding-top:4px;}
#mq{width:150px;height:20px;background:#eeeeee}
</style>
<div id="dv">
<marquee id="mq" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" direction="left" behavior="scroll" loop="-1" deplay="0">
<script>
//1）直接输出，没有问题
//document.write('文档流未关闭或者直接在window.onload中设置，可对多有内容滚动');
</script>
</marquee></div>
<script>
//2）在marquee控件下直接执行代码设置innerHTML，也没有问题
//var mq = document.getElementById('mq')
//mq.innerHTML = '文档流未关闭或者直接在window.onload中设置，可以所有内容滚动';
//3）window.onload中设置，也没有问题
window.onload = function () {
var mq = document.getElementById('mq')
mq.innerHTML = '文档流未关闭或者直接在window.onload中设置，可对所有内容滚动';
}
</script>
对于文档流完毕关闭后如何动态设置marquee，使内容长度即使超出了marquee定义的宽度也可以滚动全部的内容，解决办法就是给marquee添加一个容器，如上面所示，设置div容器的innerHTML，连marquee标签一起设置就没问题了。
<style>
#dv{width:300px;background:#cccccc;margin:0px auto;padding-top:4px;}
#mq{width:150px;height:20px;background:#eeeeee}
</style>
<div id="dv"></div>
<script>
window.onload = function () {
setTimeout(function () {//哪怕是1ms的计时器只差，firefox下内容也无法全部滚动
var dv = document.getElementById('dv')
dv.innerHTML = '<marquee id="mq" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" direction="left" behavior="scroll" loop="-1" deplay="0">解决办法就是给marquee添加一个容器，如上面所示，设置div容器的innerHTML，连marquee标签一起设置就没问题了</marquee>';
}, 2000);//随便设置计时器延时时间，firefox下也正常工作
}
</script>
此问题只在firefox下出现，ie和chrome在文档流关闭后设置marquee innerHTML内容长度大于marquee定义宽度也会继续滚动剩余的内容。
加支付宝好友偷能量挖...
原创文章，转载请注明出处：firefox下javascript设置marquee innerHTML滚动bug