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

Question

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

问题是在 Firefox v35.0.1 中，关注者数量显示不在同一行，就好像同一行上没有足够的 space。看照片：

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

我尝试使用 css 设置 iframe 宽度，但这没有用，因为当我预期代码时，结果发现 Linkedin iframe 中还有另一个 iframe，并且内部 iframe 的尺寸再次错误。

有什么想法吗？

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

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

编辑：有人编辑了我的 post，从中删除了 Linkedin 标签，但我真的相信这是他们的问题，而不是 Firefox 或 CSS，因为他们的 javascript 将 width/height 添加到按钮 iframe 并将它们添加错误。同样在 IE 中出现同样的问题。我添加了两次按钮 - 第一次按原样添加，第二次在可见包装器中，很明显在可见包装器中一切正常，但在隐藏包装器中已损坏。

更新 3：我意识到按钮 iframe 的宽度与其 #body 元素的 'min-width: 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;
}

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

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

Linkedin Follow Button not showing properly in Firefox

html

css

firefox

iframe

linkedin