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

Question

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

问题是在 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 元素的“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 像素的元素，并且它对用户是隐藏的。