javascript - 使用 HTML5 工具提示会在 Google Chrome 上破坏页面

Question

所以我写了this page从头开始，使用 php、python 和 bash。该页面从服务器收集数据，并显示它。

我想在世界地图上添加工具提示，这样用户可以在点击/鼠标悬停时看到站名。我关注了this tutorial .

1- 我用#wrapper 包装了我的世界图像

2- 我添加了 CSS 代码

3- 我添加了 Javascript 代码。

一开始看起来不错，工具提示也能正常工作，但在 Google Chrome 上，90% 的时间(我在 Windows 10 上查看此内容)我突然发现世界地图搞砸了，因为接下来，越过数据图:

虽然它应该是这样的:

我注意到此问题发生在 Google Chrome 中，而不是 Mozilla Firefox 或 Microsoft Edge 中...为什么会发生这种情况？我觉得一个简单的 float 命令可以解决它。你能帮我解决这个问题吗？为什么会这样？

如果您需要任何其他信息，请询问。

更新:

我注意到删除这部分脚本可以解决问题:

    $('#wrapper').css({'width':$('#wrapper img').width(),
                  'height':$('#wrapper img').height()
})

但是工具提示不起作用。

Answer 1

您的 rome.js 包含在 head 部分。如果它比 html 主体更早加载，那么它将比 dom 内容更早执行。 所以第一次一切正常，因为 js 正在加载 dom 内容。第一次刷新后 js 将从缓存中获取并过早执行。

所以你应该使用 jquery $(document).ready() method 来阻止它或 DOMContentLoaded event .

或者您可以简单地将您的 rome.js 包含在 body 部分的末尾。