javascript + css 的 Safari 问题答案

【问题标题】：Safari issues with javascript + cssjavascript + css 的 Safari 问题
【发布时间】：2009-09-08 09:27:14
【问题描述】：

我在使用 safari 时出现了一些奇怪的行为，我使用 jQuery.GridLayout 插件和 css 进行样式设置。

仅在某些情况下，此网站布局是一个简单的标题，其后是内容，这些内容是由 javascript 定位的块集合（每个块是一个 div），并在每次调整窗口大小时重新排列。

当我将 safari 引导到网站 url 时，所有块在一定程度上重叠（比如 50%），但是当我重新调整窗口大小时，如果它们必须移动，则会自动全部转到正确的位置，并且只有在我刷新时才会中断页面。

因此，加载页面似乎把它搞砸了，要么是因为注册失败，要么是因为在我重新调整窗口大小之前没有发生任何事情。

有人在 Safari 中经历过这种行为吗？

它在 firefox 和 opera 中完美运行，它是一个有效的 html 4.01 过渡页面，并且 css 也经过验证（即 wc3 明智）。

我知道发布代码对于解决此类问题非常宝贵，但这是一个生产项目，我有义务不这样做。

无论哪种方式，我都很感激关于开始寻找的任何建议？

如何在 safari 中调试这个问题？

谢谢。

【问题讨论】：

慢慢开始一个一个地删除所有元素，看看你的输出是否得到修复。它得到修复的那一刻，你就会知道问题是什么。从删除最里面的 div 开始，然后是它的父级等等。
一个经典的 :) 谢谢，我一直在删除一些内容，看看它是如何进行的不应该，实际上它看起来更像意大利面条而不是实际代码。

标签： javascript css safari debugging overlap

【解决方案1】：

Safari 在加载链接资源之前触发 DomReady。这种关于计算 CSS 中定义的元素大小的竞争条件通常可以通过在任何 JavaScript 之前加载你的 CSS 资源来避免（例如：确保标签出现在 ANY 之前的标签中（这是阻塞的，但给 CSS 进行更改以异步加载). 更糟糕的情况，将你的块移动到中的最后一个元素，留下你的标签。

还建议使用 CSS 连接多个文件（如果有的话）。

【讨论】：

【解决方案2】：

如果您无法为我们发布页面的实际代码，您可能会在尝试在没有具体内容的情况下重现问题时找到解决方案。过去，我在尝试生成一个显示问题的页面以在 IRC / SO 上发布时解决了我自己的一些问题。如果您能够在没有内容的情况下重现问题，请将其发布到社区，这样会更容易找到答案。

我的猜测导致：

您可能会发现您的某个内容块导致了该问题。
您可能会发现您正在使用的其他库导致了该问题。
您的布局的一些 javascript 代码可能在一切准备就绪/填充之前运行。根据我的记忆，Safari 可以在加载图像之前快速显示页面。
也许您需要指定某些网格容器的确切宽度/高度。

【讨论】：

谢谢，我会尽快制作一个类似的并发布，我现在注意到的一件事是，其中一个块不同，因为它将容纳“新闻”，具有相似的形状但除了背景/顶部/底部之外不使用图像，如果我只使用那个（重复）它们的结构几乎与其他块相似，尽管边距有点错误并且如果我重新调整大小会得到修复.
目前所有内容块都是平等的，除了“新闻”块，没有重图或内容，一些 6/7 的文本，图像类似于 168x168。我只使用这个库 jQuery.gridLayout。这很有趣，我希望听到的是，safari 在准备好之前加载东西有一些怪癖，但由于我在本地测试它有点奇怪，也许 java 脚本需要更多时间来执行。我的块确实有指定的宽度但没有高度，我可能会尝试至少指定最小高度。
如果浏览器调整大小事件触发正在修复布局，您是否考虑过在文档准备好 100 毫秒后手动刷新布局？它并不能真正解决您的问题，但可以作为一种创可贴。
好的，我试过了，它确实有效，但是如果我刷新页面，边距又会出错，现在我正在修复我的修复：P，更严重的是，也许 safari 确实加载东西太快了js 正确执行。这件事让我非常困扰，因为最初我想使用纯 html/css，因为我的 javascript 技能不存在，我可以弄乱代码但我不太适应它，因为我的理解很差。感谢您的帮助，我将保持更新此线程，直到我确定导致它的原因，我会尽快更新示例页面。

【解决方案3】：

小更新：

（底部有新更新）

http://www.howtocreate.co.uk/safaribenchmarks.html

这个小脚本也在起作用：

<script language="JavaScript"> 
 // CREDITS: 
 // Automatic Page Refresher by  Peter Gehrig and Urs Dudli www.24fun.com 
 // Permission given to use the script provided that this notice remains as is. 
  // Additional scripts can be found at http:
  //www.hypergurl.com 
 // Configure refresh interval (in seconds) 
 var refreshinterval=20 
 // Shall the coundown be displayed inside your status bar? Say "yes" or "no" below:
 var displaycountdown="yes" 
 // Do not edit the code below 
 var starttime 
 var nowtime 
 var reloadseconds=0 
 var secondssinceloaded=0 
 function starttime() { starttime=new Date() starttime=starttime.getTime() countdown() 
 } function countdown() { nowtime= new Date() nowtime=nowtime.getTime()      secondssinceloaded=(nowtime-starttime)/1000 
 reloadseconds=Math.round(refreshinterval-secondssinceloaded) if      (refreshinterval>=secondssinceloaded) 
  { var timer=setTimeout("countdown()",1000) if (displaycountdown=="yes") 
  { window.status="Page refreshing in "+reloadseconds+ " seconds" 
  } } else { clearTimeout(timer) window.location.reload(true) } }            window.onload=starttime 
 </script>

我觉得很奇怪，刷新脚本解决了 safari 中的问题，但如果我手动刷新页面，页面就会受到严重破坏......

########UPDATE##########

好吧，我终于有更多时间来处理这个问题，在阅读了一些内容之后，我想到了一个相当明显的事情，让内容加载然后格式化，所以现在我所有的 js 都位于</body> 和</html>.

它并不完美，因为现在您无需在页面首次加载时正确放置即可瞥见内容。

可能会在加载几毫秒后再次尝试调用 js。

我知道这个提议有点过头了

【讨论】：