css - 单击 Safari 5.1 选择菜单刷新页面

Question

这既是一个问题也是一个答案。我今天遇到了一个 bug，这是我作为 web 开发人员多年来从未见过的，所以我想与将来可能遇到该问题的任何人分享修复。我也很好奇是否还有其他人经历过这种情况，以及是否有已知原因。

此问题是 Mac 上的 Safari 5.1 独有的。单击选择下拉菜单时，页面将完全刷新。经过几分钟的调试，我得出结论，这个错误是由……等等……在选择框上放置一个 css 边框引起的。 (border:1px solid #ccc;)

什么鬼？

显然，Safari 的渲染引擎不喜欢这种风格，它只是破坏了整个页面。它只有 Safari 5.1(5.0.3 很好)并且只在 Mac 上。

它在我公司的多个应用程序中发生时是 100% 可重现的。但它不是 100% 普遍可复制的，这意味着我不能只是去任何随机网站并触发它。它必须是触发它的 css 规则或 html 标记的某种组合。

有没有人见过这个？是否了解可能导致它的具体情况？如果没有，哦，好吧。我会将其归因于浏览器错误，并将此帖子留给其他开发人员，以便他们在遇到相同问题时查找。

Answer 1

最终答案:

我找到了解决我们网站上特别遇到的问题的最终解决方案。站点加载后，我们有 TypeKit 库将字体附加到页面。当我专门将选择框上的 font-family 属性设置为 TypeKit 字体以外的其他内容时，刷新行为不再出现。

我不确定您是否在使用 TypeKit，但这是一个先看看的好地方。

---

原答案:

我今天在我公司运营的一个网站上也遇到了这个问题。我已经将它缩小到一组最有可能导致它的 CSS 规则(注释掉那些不会在页面重新加载时产生错误)。

我看到的主要问题很可能是浏览器本身的安全问题。如果您在任何选项卡中有任何打开的 session ，它也会清除它们的 session 数据。

找到一个有此错误的页面，然后打开您登录 Google 帐户或其他一些帐户组的其他几个选项卡。当您单击存在错误的网站上的选择框时，页面会刷新，其他选项卡中的 session 也会重置。

更新:我已经缩小了影响我们页面的 CSS 规则集。这些 CSS 规则中的任何一个都会导致此行为:

• -webkit-外观
• 边框
• 边框样式
• 边界半径
• -webkit-border-radius
• 背景重复
• 背景位置
• 背景图片

我最初认为是 -background-image 属性导致了问题，因为我们使用的是 data image ，而不是实际的 png 或 jpg(提供类似于 Firefox 中默认的样式)，但我显然错了。

更新 2: 我尝试使用 CSS 重置来使用 webkit-specific CSS hack 使事情恢复正常, 但只要触及这些 CSS 规则中的任何一个似乎都会导致事情变得一团糟。我想我们只需要删除规则，直到解决这个问题。

更新 3: 这似乎与页面上加载的 Javascript 有关。如果我在 Safari 中禁用 Javascript，则不会发生这种情况。