offsetWidth 在 Chrome 下的 css 动画块中返回错误的宽度

offsetWidth returns wrong width in css animated block under Chrome

本文关键字：错误 返回 Chrome 下的 css 动画 offsetWidth      更新时间：2023-09-26

我正在尝试在网页上制作一种"新闻栏"。该栏使用 CSS 动画，每次迭代时都会使用 ajax 刷新文本内容，以从 RSS 源中检索数据。

我的问题是内容长度可能会有所不同，因此我想将用于显示文本的字体大小设置为足够小以显示所有内容。

然后，我使用此函数调整文本内容的大小：

function resize(content /*content div*/, maxHeight/*bar height*/, maxWidth /*bar width*/) { content.parentNode.style.fontSize = maxHeight + 'px'; var totalwidth = content.offsetWidth; if (totalwidth > maxWidth) { content.parentNode.style.fontSize = (maxHeight * maxWidth / totalwidth) + 'px'; } }

它有时适用于第一次迭代，但在为 totalWidth 返回完全错误的值（如 36）之后。如果我在"if"行上放置一个断点，调试器会显示 content.offsetWidth 的一致值（如 4320）。

我该如何解决这个问题？

我已经找到了解决方案。我必须将内容设置为"内联块"。如果内容显示设置为"块"，则其偏移宽度随 css 动画而变化。

相关文章：