css - Chrome for Facebook 上奇怪的 CSS 行为就像盒子

Question

我在 Chrome 上遇到了这种奇怪的行为(我测试了 Windows 和 Linux 版本)。我还在 Firefox 上对其进行了测试，但它可以正常工作。

我在 Wordpress 端小部件中显示了 Facebook Like Box。 (它使用官方 Facebook 插件，尽管如果它的输出有问题我可以自己轻松更改)。实际上，它的作用包括一个 iFrame。

1. 小部件底部的 Facebook Logo 下方出现奇怪的白色填充。奇怪的是，当我将鼠标悬停在标题上时，它只是改变了颜色，盒子突然自动将高度调整到正确的高度。可以看看here右边的 Facebook Like Box 小部件(从上数第三个框)有一些白色填充。将鼠标移到“喜欢我们？”标题，它突然将高度调整到正确的高度。

2. 当用户导航到另一个页面并返回该页面时，会出现更严重的问题。打开页面后，在地址栏中输入另一个 URL，例如 www.google.com。加载后，只需单击 Chrome 浏览器的“后退”按钮。你会突然发现 Facebook Like Box 并没有像以前那样渲染，而是渲染在一个更浅的盒子里，并且出现丑陋的滚动条。

发生这种情况的原因是什么？这是我第一次遇到这些看似无关的行为(悬停链接并单击返回)时出现的奇怪问题

Answer 1

据我所知，在你的servicebox框(包含类似框)你有一个 div类 serviceheading有 float: left; .我想这可能会给您带来麻烦，因为 servicebox本身没有任何包含 float 的属性。您可以尝试添加 clearfix .servicebox 的解决方案或尝试添加 overflow: hidden;作为快速修复。这可能会解决您的第一个问题。

就第二个问题而言。我会尝试添加一些属性来检查它们是否有帮助。

• 制作.fb_iframe_widget通过 clear: left; 清除 float Logo 它 将使此 block 始终位于 Logo 下方。
• 制作.fb_iframe_widget display: block; 的 block 元素(正确的 现在 - 它是 inline-block ).它会自动给它宽度 父元素 (303px)
• 创建以下选择器.fb_iframe_widget iframe并添加 max-width: 100%;给它。这些样式将确保 iframe 不会变大 - 所以滚动按钮可能 消失。

希望对您有所帮助。

更新

由于某种原因，当按下后退按钮时 <span>在.fb_iframe_widget里面被设置为 0px 的高度和宽度。下面解决了这个问题，尽管它有点乱七八糟，高度和宽度必须硬编码:

.fb_iframe_widget iframe
{
    height: 230px !important;
    width: 300px !important;    
}

.fb_iframe_widget span
{
    height: 230px !important;
    width: 300px !important;    
}