Problemas com Cufón, fica um margin no IE8

Dae galera, estou quebrando a cabeça pra resolver esse problema:

Estou usando o Cufon no menu, mas no IE8 está ficando um margin-top ou padding-top...

Segue os prints:

Como deve ser: (IE9, Chrome, FF)

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.grupoamigobicho.com.br/outros.png&key=b8ae4fb32b835217eceb383526713a433583d8aba531bb9148b816b486825089" alt="outros.png" />

Como fica: (IE8)

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.grupoamigobicho.com.br/ie8.png&key=0483eba81a5d38f848c4e58092252f05af69acf4a90215d8eb22ccc070832ca5" alt="ie8.png" />

CSS:

header#topo nav#menu {width: 100%; height: 70px; line-height: 70px; background: #b0dcfb; font-family:"BeautifulEveryTime"; font-size:20px;}
header#topo nav#menu li {height: 70px; display: table; text-align: center; float: left; margin: 0; padding: 0;}
header#topo nav#menu li a {text-decoration: none;}
header#topo nav#menu li.i1 {width: 100px;}
header#topo nav#menu li.i2 {width: 150px;}
header#topo nav#menu li.i3 {width: 150px;}
header#topo nav#menu li.i4 {width: 110px;}
header#topo nav#menu li.i5 {width: 120px;}
header#topo nav#menu li.i6 {width: 120px;}
header#topo nav#menu li.i7 {width: 120px;}
header#topo nav#menu li.i8 {width: 123px;}
header#topo nav#menu li.selected {background: url('../images/menu-selected.png') no-repeat center 59px;}
header#topo nav#menu li:hover {background: url('../images/menu-selected.png') no-repeat center 59px;}
header#topo nav#menu .menu-separador {width: 1px; height: 70px; display: table; background: url('../images/menu-separador.png') no-repeat top center; float: left;}

HTML:

<nav id="menu">

 <div class="centro">

 <ul>

 <li class="i1 <?php if (!isset($_GET['pag'])){ echo 'selected'; } ?>">
 <a href="index.php">HOME</a>
 </li>

 <div class="menu-separador"></div>

 <li class="i2 <?php if (($_GET['pag']) == 'sobre-a-ong'){ echo 'selected'; } ?>">
 <a href="index.php?pag=sobre-a-ong">SOBRE A ONG</a>
 </li>

 <div class="menu-separador"></div>

 <li class="i3 <?php if (($_GET['pag']) == 'como-ajudar'){ echo 'selected'; } ?>">
 <a href="index.php?pag=como-ajudar">COMO AJUDAR</a>
 </li>

 <div class="menu-separador"></div>

 <li class="i4 <?php if (($_GET['pag']) == 'adote'){ echo 'selected'; } ?>">
 <a href="index.php?pag=adote">ADOTE</a>
 </li>

 <div class="menu-separador"></div>

 <li class="i5 <?php if (($_GET['pag']) == 'noticias'){ echo 'selected'; } ?>">
 <a href="index.php?pag=noticias">NOTÍCIAS</a>
 </li>

 <div class="menu-separador"></div>

 <li class="i6 <?php if (($_GET['pag']) == 'eventos'){ echo 'selected'; } ?>">
 <a href="index.php?pag=eventos">EVENTOS</a>
 </li>

 <div class="menu-separador"></div>

 <li class="i7 <?php if (($_GET['pag']) == 'produtos'){ echo 'selected'; } ?>">
 <a href="index.php?pag=produtos">BRECÓ</a>
 </li>

 <div class="menu-separador"></div>

 <li class="i8 <?php if (($_GET['pag']) == 'contato'){ echo 'selected'; } ?>">
 <a href="index.php?pag=contato">CONTATO</a>
 </li>

 <div class="clear"></div>

 </ul>

 </div>

	</nav>

JS:

<script type="text/javascript">
Cufon.replace('h1,h2,h3');
Cufon.replace('nav#menu');
Cufon.replace('.titulo-adote');
Cufon.replace('.fonte');
Cufon.replace('.caption');
</script>

Desabilitando o Cufón fica certinho...

Alguém sabe como resolver isso?

Obrigado!