我正在开发一个网页代码，它从服务器动态获取内容，然后使用类似的东西将此内容放置到容器节点
container.innerHTML = content;
有时我必须覆盖此节点中以前的一些内容。这很好用，直到以前的内容占用了更多的垂直空间，然后新的内容会占用更多的垂直空间，并且用户向下滚动页面 - 滚动超过新内容允许的高度，前提是它的高度。
在这种情况下，页面重绘不正确 - 旧内容的一些伪影仍然存在。它工作正常，甚至可以通过最小化和恢复浏览器（或强制以其他方式重绘窗口）来消除伪影，但这似乎不太方便。
我只在 Safari 下测试这个（这是一个 iPhone 优化的网站）。
有人知道如何处理这个问题吗？
【问题讨论】：
标签： javascript html dom
我找到的最简单的解决方案是在您正在编辑的div 的顶部放置一个锚标记<a>：
<a name="ajax-div"></a>
然后当你改变div的内容时，你可以这样做让浏览器跳转到你的锚标签：
location.hash = 'ajax-div';
使用它来确保在您更新内容时用户不会向下滚动太多，并且您一开始就不应该遇到问题。
（在最新的 FF beta 和最新的 safari 中测试）
【讨论】：
我会尝试做 container.innerHTML = ''; container.innerHTML = 内容；
【讨论】：
每次更新 innerHTML 时将元素的 CSS 高度设置为“自动”。
【讨论】：
听起来 Safari 的 webkit 渲染引擎一开始并没有识别出内容的变化，至少还不足以完全删除之前的 html 内容。最小化然后恢复窗口会在浏览器的渲染引擎中启动重绘事件。
我想我会探索 2 个途径：首先我可以使用 iframe 代替当前的“内容”节点吗？浏览器希望 IFrame 发生变化，但是正如您所见，它们并不总是那么擅长更改 DIV 或其他元素的内容。
其次，也许通过修改滚动位置，如前所述。您可以按照建议将滚动条简单地移回 0，或者如果这太突兀，您可以尝试在内容更改后恢复滚动条。从当前滚动位置减去旧内容节点的高度（将浏览器的滚动重置为内容节点的0），更改节点内容，然后将新节点的高度添加到滚动位置。
Palehorse 是对的（我目前无法投票赞成他的答案 - 没有分数）像 jQuery、Dojo 甚至 Prototype 这样的抽象库通常可以帮助解决这些问题。尤其是当您看到您的页面/网站超越了简单的 DOM 操作时，您会发现库提供的工具和增强功能非常有帮助。
【讨论】：
在替换内容之前将滚动位置设置回顶部（element.scrollTop = 0; element.scrollLeft = 0; by heart）是否有效？
【讨论】：
听起来您的浏览器本身有问题。这个问题只出现在一个浏览器中吗？
您可以尝试的一件事是使用像jQuery 这样的轻量级库。它很好地处理了浏览器的差异。要为 ID 为 container 的 div 设置内部 HTML，您只需这样写：
$('#container').html( content );
这适用于大多数浏览器。我不知道它是否会专门解决您的问题，但可能值得一试。
【讨论】：