Question

我有一个正在运行的新闻自动收录器，在FF中正确显示但不是所有版本的Chrome：

<div id="a" style="position:fixed; bottom:50px; height:30px;">
  <span id="b" style="display:inline; position:absolute;">blah blah text one two three.</span>
</div>

当加载文档时，我调用jquery函数来设置css，（设置#b的LEFT从右向左移动），当文本在屏幕上完成时，我将#b的LEFT重置为screen.width

但在某些调查中，＃b的文本将被剪切为只有1-2个字，（FF显示正确地像新闻自动收报机），我发现在chrome下文本被分成多行并且永远不会改回来。

我想知道如何避免这种情况？或者这是chrome的错误

Answer 1

我在Opera上检查了这个，文本也分成了多行。所以这可能不仅仅是Chrome问题。我删除position: absolute修复了多行问题。动画需要这个位置吗？

编辑：再次检查后，这不是一个职位问题。出现此问题是因为a没有宽度，浏览器正在尝试将b的宽度最小化到最小值。如果您添加宽度属性，这应该可以解决问题。最好的将工作超过100％，因此有一个隐藏b的权利。以下是此解决方案的示例，宽度为200％ - 适用于Opera，FF和Chrome。

<html>
<body>
<script language="javascript">
var pos = innerWidth;
function setTimer() {
    b = document.getElementById('b')
    pos = pos - 10;
    if(pos <= 0)
        pos = innerWidth;
    b.style.left = pos+"px";
    setTimeout(setTimer,100);
}

</script>
<button onclick="setTimer()">start</button>
<div id="a" style="position:fixed; bottom:50px; height:30px; background-color: gold; width:200%">
  <span id="b" style="position:absolute; background-color: teal">blah blah text one two three.</span>
</div>
</body>
</html>

Chrome跨度渲染问题

1 个答案: