Html Chrome跨度渲染问题_Html_Css_Google Chrome

Html Chrome跨度渲染问题

html css google-chrome

Html Chrome跨度渲染问题,html,css,google-chrome,Html,Css,Google Chrome,我有一个运行的新闻代码，在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> 胡说八道的文字一二三。加载文档时，我调用

我有一个运行的新闻代码，在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的左侧设置为从右向左移动），当文本在屏幕外完成时，我将#b的左侧重置为screen.width

但是#b的文本将被删减到只有1-2个单词（FF显示正确，就像新闻自动售票机一样）。在一些调查中，我发现在chrome下，文本被分成多行，并且永远不会更改

我想知道我怎样才能避免这种情况？或者这是chrome的错误

我在Opera上检查过，文本也被分成多行。所以这可能不是Chrome唯一的问题。我已通过删除

位置：绝对

修复了多行问题。动画需要这个职位吗

编辑：再次检查后，这不是职位问题。出现此问题的原因是

没有宽度，而浏览器正试图将

的宽度减至最小。如果添加“宽度”属性，则应修复一个问题。最好的将工作的东西超过100%，所以在右边有一个地方隐藏

。这是一个宽度为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>


var pos=内部宽度；
函数setTimer（）{
b=document.getElementById（'b'）
pos=pos-10；
if（pos我在Opera上检查了这个问题，文本也被分成多行。所以这可能不仅仅是Chrome的问题。我通过删除位置：绝对，修复了多行问题。动画需要这个位置吗
编辑：再次检查后，这不是职位问题。出现此问题的原因是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>


var pos=内部宽度；
函数setTimer（）{
b=document.getElementById（'b'）
pos=pos-10；
if（pos）我删除了位置属性，但仍然没有运气。我删除了位置属性，但仍然没有运气。