Question

我试图隐藏Facebook页面插件但看起来它不起作用。这是我的CSS代码

@media only screen and (max-width:800px){
.fb-page{
    visibility: hidden;
}

这是我存储FB的HTML部分。

<section id="login-form" class="no-margin customloginform">
    <label>Username: </label><br /><asp:TextBox runat="server" ID="txtUsername" type="text" CssClass="centermargin" class="form-control" required="required"></asp:TextBox><br />
    <label>Password: </label><br /><asp:TextBox runat="server" ID="txtPassword" type="password" CssClass="centermargin" class="form-control" required="required"></asp:TextBox><br />
    <asp:Button runat="server" id="btnLogin" type="submit" OnClick="btnLogin_Click" name="Login" class="btn btn-primary btn-lg centermargin" required="required" Text="Login" Width="150px"></asp:Button>
    <center><a href="Account/ForgotPassword.aspx">Forgot Password</a></center>
    <center style="color:#ffffff">Not a member? <a href="Account/Register.aspx">Register</a></center><br /><br />
    <div class="hidden-sm"><div class="fb-page " data-href="https://www.facebook.com/TechKidPHMods/" data-tabs="timeline" data-width="280" data-height="409" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/TechKidPHMods/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TechKidPHMods/">TechKidPHMods</a></blockquote></div></div>
</section>

那么任何想法？感谢

Answer 1

好的，所以你display: none无法正常工作的原因是你还有其他规则在发挥作用。

您有几个选择：

在您的CSS !important媒体查询上添加.fb-page { display: none }。
稍后在CSS规则列表中应用您的媒体查询（在屏幕截图中的两个规则之后）
在要隐藏的div而不是类上添加ID。

考虑学习浏览器的网络开发者工具。这类问题可以通过它们轻松调试，因为它们可以准确显示特定规则被忽略的原因。

Answer 2

尝试：

M-x report-emacs-bug

或者如果您使用的是Bootstrap，请尝试使用hidden-xs或hidden-sm。

祝你好运。

Answer 3

在您的代码中，您错过了@media only screen and (max-width:800px){ .fb-page{ display: none; }的结束括号，但我还说如果您想在该断点处完全隐藏某些内容，则应使用.fb-page。试试这个：

display: none

响应 - 隐藏一定宽度的Facebook页面插件

3 个答案: