Question

My FB Like button isn’t showing up properly in IE7.

It seems to collapse and putting a width of 90px on it does nothing.

This is how it looks:

This is how it looks in modern browsers:

Like I said, I’ve tried putting ‘width: 90px;’ on it, but it just pushes the whole part (F and 0) to the side, with blank space next to it. I can’t really try to style the iFrame now, can I?

Does FB still support IE7?

<div class="social-buttons">          
   <div class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-action="recommend"></div>
   <div class="linkedin">
       <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
       <script type="IN/RecommendProduct" data-company="LinkedIn" data-product="xxx" data-counter="right"></script>
   </div>
</div>  

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Answer 1

I noticed a similar issue using the IE 7 browser/document mode from the IE 9 dev tools. Just as a sanity check, I installed IE 7 on a virtual machine and browsed the page with the offending facebook like buttons and they looked fine.