Linkedin 关注按钮在 Firefox 中未正确显示

Question

我已在隐藏元素中设置了 Linkedin 关注按钮，因此只有当您将图标悬停时，隐藏元素才会可见并显示按钮。

问题是在 Firefox v35.0.1 中，关注者编号不在同一行显示，就好像同一行没有足够的空间一样。看照片：

当我期待源代码时，似乎 iframe 在变得可见（悬停时）的那一刻被设置了宽度和高度，然后（在模糊时）它的宽度/高度被设置回 0。在 Chrome 中iframe 具有恒定的宽度/高度，在悬停时不会改变。

我尝试使用 css 设置 iframe 宽度，但没有成功，因为当我预期代码时，Linkedin iframe 中有另一个 iframe，而内部 iframe 的尺寸再次错误。

有什么想法吗？

更新：当我将包装元素设置为可见时，一切都很好，所以这似乎导致了问题，但我该如何解决呢？

更新 2：您可以自己查看问题：link（确保在 Firefox 中打开它！）

编辑：有人编辑了我的帖子，从中删除了 Linkedin 标记，但我真的相信这比 Firefox 或 CSS 更多是他们的问题，因为他们的 javascript 中有一些东西将宽度/高度添加到按钮 iframe 并添加它们错误的。同样在 IE 中也会出现同样的问题。我添加了两次按钮 - 第一次按原样添加，第二次在可见包装器中添加，很明显在可见包装器中一切正常，但在隐藏包装器中已损坏。

更新 3：我意识到按钮 iframe 的宽度与其#body 元素的“最小宽度：57px”相同，所以如果 Linkedin 团队将 min-width 纠正为 120px，这可能会解决这个问题.

Answer 1

问题就在这里：

在 Firefox 中，元素中加载的宽度为 2px，但在 webkit（chrome 和 opera）中为 106px。

样式没有足够的宽度在一行中显示元素。 这是答案：

    .social-details {
    width: 195px;
    /* float: left; */
    position: absolute;
    left: -120px;
    top: -7px;
    background-color: white;
    padding: 11px 10px 8px 10px;
    z-index: -1;
    border-radius: 5px;
    visibility: hidden;
}

和

#social .social-linkedin:hover .social-details {
visibility: visible;
}

它允许以 106px 的宽度加载元素，并且对用户隐藏。