Question

Facebook页面如按钮（不是盒子）破坏了我的网站在移动设备中的响应能力。以下是Facebook赞按钮的代码：

<div class="fb-like" data-href="https://www.facebook.com/myamazingfbpage" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>

虽然响应结构完好无损，但在视口右侧有一个巨大的白色空间/块/部分。网站布局没有任何东西突出强制白色空间/块/部分。按钮位于左侧边栏。

我已尝试display将其inline-block，float编辑为极端left，将其缩减为margin和{{1}到padding。此外，它还使其旁边的Twitter跟随按钮无法点击。我还尝试0 <span>。

一切都无济于事。

提前感谢我的朋友们。：）

Answer 1

看起来你正在使用WordPress插件，而该插件的自定义CSS导致了这个问题。不确定您是否正确设置了它或只是插件的CSS的错误。

罪魁祸首是这个CSS选择器：

.fb-like span {
    overflow: visible!important;
    width: 450px!important;
    margin-right: -375px;
}

上面的选择器定位的是<span>，它是您在问题中发布的<span>的直接子项。

您会在Dev Tools中注意到，即使按钮的宽度为75px，您的范围也会49px。这是由于上面的选择器。上面的选择器告诉它450px宽，然后基本上通过负边距减去375px，留下75px，在右侧创建额外的空间，因为按钮仅为{{ 1}}。

要解决此问题，您需要：

引用可能适用于该WordPress插件的任何文档，以确保您已正确配置它。
如果可能，请删除选择器。
如果无法将其删除，请覆盖选择器。

有问题的WordPress插件：Easy Social Share Buttons

HTML Facebook按钮会破坏网站的响应能力

1 个答案: