Facebook iframe不受CSS影响

Question

      <footer class="mastfoot">
        <div class="inner">
          <iframe class="iframe" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fmyfacebookpage%3F&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=21&amp;appId=705841689490152" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
        </div>
      </footer>

I have this iframe, he is a facebook like facebook page button.. i want setup display none in my css, but doesn't work, the css doesn't effect the iframe..

  .iframe {
    display: none;
  }

what could be the problem?

Answer 1

It´s not about applying CSS to an iframe, because you just want to apply the CSS to the iframe tag itself, right? Give it an ID and try again, always worked for me:

<iframe id="myIframe" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fmyfacebookpage%3F&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=21&amp;appId=705841689490152" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>

CSS:

#iframe {
    display: none;
}