Facebook JS affecting CSS/@font-face in IE?

I seem to notice that Facebook's JS

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script>

seems to affect my site's CSS in IE. eg. say headers use font1 and body use font2. sometimes, in IE all fonts u开发者_Go百科se font1 or even swap, headers used font2 and body use font1 ... It also seem to affect some PIE CSS stuff. Anyone having the same problem?

I had the exact same problem. I use a downloaded font for my headers and on IE8, the Facebook Javascript screwed up the fonts. This occurred when I structured my code in what I assumed was the proper architecture - the Facebook Javascript include was up in my header with the rest of my Javascript includes.

When I moved the javascript include down to the actual div that added the like button, the problem went away.

    <div id="facebooklike" style="position: absolute; left: 645px; top: -37px;">
    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.tripinsurance.com" send="false" width="350" show_faces="false" font="arial"></fb:like>
    </div>

I think the issue may be happening if the Facebook code is loaded before the the div loads on the page.