响应式 Facebook 评论 CSS Hack Broken [英] Responsive Facebook Comments CSS Hack Broken

查看:44
本文介绍了响应式 Facebook 评论 CSS Hack Broken的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用:

.fb-comments, .fb-comments span, .fb-comments iframe[style] {宽度:100%!重要;}

使 Facebook 评论在我的网站上具有响应性.就在前几天,这工作得很好,而且很花哨.今天我看看,他们已经改变了他们的代码.有没有可能让它再次工作?

解决方案

这是一个新的纯 CSS 解决方案.为我今天(2014 年 7 月 16 日)正在开展的一个项目执行此操作,并且效果很好.

HTML

CSS

.fb_iframe_widget,.fb_iframe_widget 跨度,.fb_iframe_widget 跨度 iframe[样式] {最小宽度:100%!重要;宽度:100%!重要;}

诀窍是 data-width: 100%min-width: 100% !important;宽度:100% !important;

I was using:

.fb-comments, .fb-comments span, .fb-comments iframe[style] {
    width: 100% !important;
}

To make Facebook Comments responsive on my website. This was working fine and dandy just the other day. Today I look and they have changed their code. Is it possible to get this working again?

解决方案

Here's a new CSS-only solution. Did this for a project I'm working on today (July 16, 2014) and it works beautifully.

HTML

<div class="fb-comments"
     data-href="http://example.com/comments"
     data-numposts="10"
     data-width="100%"
     data-colorscheme="light"></div>

CSS

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
  min-width: 100% !important;
  width: 100% !important;
}

The trick are data-width: 100% and min-width: 100% !important; width: 100% !important;

这篇关于响应式 Facebook 评论 CSS Hack Broken的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆