css - 如何让多个 Facebook Like 按钮在响应式布局中显示和 Conceal

Question

在我的设计中，我将 Like 按钮移动到小屏幕尺寸的页脚。在 Chrome 中，通过多次调用小部件，这很有效。在其他浏览器中，可见的 Like 按钮会正确 Conceal ，但另一个不会在调整大小时加载。

http://jsfiddle.net/isherwood/kc3r2

@media (max-width: 400px) {
    #header .fb-like {display: none;}
    #footer .fb-like {display: block;}
}

<div id="header">
    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div id="footer">
    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>

Answer 1

尝试使用 visiblity 而不是 display:

#footer .fb-like { visibility:hidden; }

@media (max-width: 400px) {
    #header .fb-like { visibility:hidden; }
    #footer .fb-like { visibility:visible; }
}