gpt4 book ai didi

html - Chrome 跨度渲染问题

转载 作者:行者123 更新时间:2023-11-28 03:46:21 26 4
gpt4 key购买 nike

我有一个正在运行的新闻自动收报机,在 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 的错误

最佳答案

我已经在 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>

关于html - Chrome 跨度渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5610748/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com