Chrome中一个奇怪的渲染错误

Question

  

更新

     

如果您第一次加载the page并且未发生此错误，

     

点击，再次将您定向到主页，很可能会显示错误。 （令人讨厌的是，几乎每次我从其他页面返回主页时，都会出现此错误。）

     

我正在使用Chrome 24.0.1312.57。

---

Chrome一直是支持CSS3的最佳浏览器之一。当我遇到类似虫子的奇怪行为时，我感到非常失望。

我手工制作了一些simple circular buttons with CSS3 and jQuery。 （我没有选择纯Javascript，因为我懒得自己研究crossbrowser的兼容性。）

按钮基本上由一个包含两个子分区的分区组成，一个子分区也包含另一个子分区。它们都在一个锚点内，触发一个叠加的窗口：

<a><div class="archbox smaller"><div class="archfacebook"></div>
<div class="archrollerx"><div class="archfacebook below2"></div></div></div></a>

锚的样式简单为flow:right，这就是外部分区的样式：

-webkit-border-radius: 22px;
border-radius: 22px;
height: width: 44px;
height: 44px;
overflow: hidden;
border: 1px #FFF solid;
position: relative;

当出现任何问题时，这就是他们看待休息阶段的方式：

但有时当我加载页面时，会发生这种情况：

但是按下按钮后，它再次恢复正常。 （好像你刚刚告诉Chrome有一个错误。）

它暂时恢复正常，但过了一段时间后，再次出现了。

有时它会在moused-over时给出额外的边框：

这实际上是一种奇怪的行为，因为它不像每次加载页面时发生的运行时错误。有时它会发生，而有时它根本就不会发生。所以我觉得有必要解决它。

起初我以为边框有一些bug，所以我补充说：

border:1px #FFF solid!important;

到按钮的正常，悬停和访问状态。但它没有解决问题;它仍然经常发生。我真的很沮丧。在考虑了一段时间之后，我终于意识到实际上存在一个移位错误：看起来Chrome有“潜意识地”显示Facebook＆amp;推特按钮再次落后于Twitter和谷歌加按钮，给人一种他们有边框的错觉。我不知道如何阻止Chrome以这种方式行事。

之前有没有人遇到过同样的问题？我该怎么办才不会发生这种情况？

我试过Firefox和Safari，我还没有遇到过这个。

Answer 1

我多次重新加载页面，也使用私密浏览来避免缓存，没有遇到过这个bug。谷歌浏览器24.0.1312.57米，Windows 7旗舰版64b。

您的Google Chrome浏览器是否可能从缓存中加载一些资源？

Answer 2

<强>更新：

<a class="con archtwitterx" href="https://twitter.com/intent/tweet?text=+check+this+article+ out&amp;url=http%3A%2F/www.arch0-0.com/2013/02/why-i-chose-to-drop-out.html" onclick="javascript:window.open(this.href,   '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=800');return false;" target="_parent" style="
    border: 0;
">

style =“border：0;”在固定它

---

outline: 0;

可能会成功。但我的猜测是在边境。