草庐IT

关于html：Facebook Like 按钮导致水平滚动条

codeneng 2023-03-28 原文

Facebook Like Button Causing Horizontal Scrollbar

我最近在我的网站上添加了一个类似 facebook 的按钮，它会导致在不需要时出现水平滚动条。它不会出现在 Chrome 中，但会出现在 Firefox 和 IE 中。

我在 Firebug 中检查了创建的代码，但看不出有什么问题。

这是该网站的链接，您可以查看：http://www.swiftfurniture.com/

如您所见，在 Firefox 和 IE(可能还有其他浏览器)上，不需要水平滚动条。这绝对是 Facebook 的点赞按钮造成的，因为当我将其注释掉时，它们就会消失。

我在按钮周围添加了一个固定宽度的 div，并应用了溢出：隐藏，但它似乎忽略了这一点。

我知道还有很多其他类似的问题，但是使用 PrestaShop 我真的不想为了让 Facebook Like 按钮工作(如果可能的话)而过多地弄乱核心代码。我希望找到一种解决方案来将所有代码包含在我创建的"社交模块"中......即 - 只是一个文件，而不是与 PrestaShop 的头文件等混在一起。

您可以在"fb-like"属性中添加data-width="100px"

  • 这是正确的解决方案。我喜欢的小部件在加载时不再跳转到大宽度。
  • 在此页面上列出的各种解决方案中，这是唯一对我有用的解决方案。症状是 FB 按钮加载时水平滚动条闪烁(然后消失)。

我已经用 Firebug 调查了您的问题，可以分享一些可能有用的观察结果。

有代码被注入到您的 中，其中包含一个内联样式宽度为 575px 的 iframe。

这就是导致滚动条的原因。

  • 不知道我是怎么错过的，我知道一定是有什么东西使它变宽了，但找不到它。嗬！我补充说： .FB_UI_Hidden { \twidth: 100px !important; } 作为一种 css 样式，它解决了这个问题。谢谢

Facebook 插入您页面的标记可能会发生变化，因此您希望使用不依赖它的解决方案。

您可以通过将 fb-root div 作为 body 元素的第一个子元素来解决此问题

1
<body>

脚本标签和类似fb的div可以保留在原来的位置。

参考：Facebook 文档和错误报告

  • 我有 #fb-root 作为第一个子 div，我仍然看到问题。

将此添加到您的 css

1
.fb-like{height:20px}

将属性 data-width 和 data-height 添加到

1
 

这也可以防止垂直滚动条在不需要时出现。

这里没有一个答案对我有用，所以我自己尝试了一下。我找到了解决方案：

将以下 CSS 放入您的网站头部：

1
2
3
#fb-like-wrapper iframe {
    width:100px!important
}

把下面的 HTML 放在你想显示喜欢按钮的地方：

1
2
3
    <div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite"
    data-layout="button_count" data-action="like"
    data-show-faces="false" data-share="false"></div

你去吧:)

后面有一个 DIV

1
 

从这里删除绝对位置，水平滚动将消失
之后它会显示一些内容说

Given URL is not permitted by the application configuration.

所以要么删除这个 DIV，要么应用

display:none; 让它完美地工作

看这个截图

  • 有问题看到有一个水平滚动
  • 有解决方案看到没有水平滚动但不需要
    圈子里的内容。
  • 将 display none; 应用于此 div 或删除此 div
    完全来自代码，将引导您找到解决方案

    • 据我所知，我无法更改任何代码？它是由 Facebook 注入的。

    我遇到了同样的问题...代码中有一个宽度(我认为默认值为 450)。如果您将其更改为 150 左右，我认为您的状态会很好。当然，这取决于您在 facebook 插件上选择的偏好。

    祝你好运，希望对你有所帮助。

    Facebookhtmlsectionspanclasscssfacebookfacebook-likeprestashop

    有关关于html：Facebook Like 按钮导致水平滚动条的更多相关文章

    1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

      在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

    3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

      所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

    4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

      我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

    5. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

      我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

    6. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

      我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

    7. Ruby 守护进程导致 ActiveRecord 记录器 IOError - 2

      我目前正在用Ruby编写一个项目，它使用ActiveRecordgem进行数据库交互，我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录，因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame

    8. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

      我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

    9. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

      我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

    10. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe？ - 2

      考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

    随机推荐