Can someone please help me figure out why IE9 seems to ignore the top-margin of my logo at the below link?

Scribbles & Bits

  <div id="logo">
      <h1 id="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">Scribbles & <span>Bits</span></a></h1>
  </div>

#logo 
width: 120px;
float: left;
padding: 0 0 0 40px;
margin: 20px 0 10px 0;

There is also an increased amount of space in between the first and second lines of the link that only appears in IE9 that I think may have something to do with the span.

Any ideas on how to fix this would be much appreciated.

Thanks!