Estou tendo alguns problemas importantes com um layout que estou criando especificamente no Internet Explorer. Sei que o IE converte largura e altura de maneira diferente quando há bordas e preenchimento, então incluí códigos no meu css para fazer a navegação parecer igual no IE e no Mozilla e Chrome.

O problema que estou tendo agora é que tenho animação jquery em execução na minha navegação e está atrapalhando no IE, principalmente devido às diferenças de altura entre o meu código Mozilla / Google e as especificidades do IE. Eu procurei em vários sites e criei um arquivo jquery separado com os parâmetros de altura para fazer a navegação parecer boa no IE, mas, por alguma razão, o IE está acessando o menu.js em vez do iemenu.js

Encontrei vários sites com diferentes bits de código para tentar forçar o IE a ler o iemenu.js em vez do menu.js enquanto os outros navegadores lêem o menu.js. Infelizmente, por algum motivo, o IE não lê o iemenu.js, e sim o menu.js.

eu tentei

<script type="text/javascript">var runFancy = true;</script>
<script>runFancy = true;</script>
<!--[if IE]>
<script type="text/javascript">
runFancy = false;
</script> // <script type="text/javascript" src="iemenu.js"></script>
<![endif]-->

<script type="text/javascript" src="menu.js"></script>

Eu também tentei

<!--[if IE 9]>
<script type="text/javascript" src="iemenu.js"></script>
<![endif]--> 

Outro, descobri que não funcionava tão bem:

<!--[if lt IE 9]>
<script type="text/javascript" src="iemenu.js"></script>
<![endif]-->

Outro problema que estou tendo é a animação, que faz com que a navegação diminua de altura e volte ao tamanho normal quando o mouse é retirado, é extremamente problemática quando eu incluo preenchimento no css para fazer o texto diminuir um pouco . Eu testei isso sem o preenchimento e a animação funciona bem, mas cerca de metade do texto é cortada após a animação. Eu também tentei usar o plugin hoverintent que não corrigiu o problema de falha.

Aqui está uma amostra do css de navegação:

.nav1 {
 width:96px;
 bottom:0;
 right: 311px;
 height:45px;
 font-size:20px;
 font-family:Verdana, Geneva, sans-serif;
 color:#ffffff;
 padding-top:15px;
 padding-bottom:0px;
 display: inline-block;
 position:absolute;
 text-align:center;
 border:1px solid;
 border-bottom:0px;
 border-color:#000000;
 background: url("images/navbg.jpg") no-repeat;
 }

 * html .nav1 {
\width: 96px; /* for IE5 and IE6 in quirks mode */
 w\idth: 98px; /* for IE6 in standards mode */
 \height: 61px; /* for IE5 and IE6 in quirks mode */
 h\eight: 62px; /* for IE6 in standards mode */
 }

E aqui está o código jquery. O iemenu.js e o menu.js são criados da mesma forma, apenas possuem valores diferentes para a altura:

$(function() {

$('.nav1').hover(function() {
    $(this).stop().animate({height:30, right: 311}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 311}, 300);
});

 $('.nav2').hover(function() {
    $(this).stop().animate({height:30, right: 408}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 408}, 300);
});

  $('.nav3').hover(function() {
    $(this).stop().animate({height:30, right: 505}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 505}, 300);
});


  $('.nav4').hover(function() {
    $(this).stop().animate({height:30, right: 602}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 602}, 300);
});



});

Eu tentei quase todos os truques do fixador do IE no livro que conheço e encontrei on-line aqui e em outros sites e nada parece estar funcionando até agora ... Eu trabalho no IE 7.

Além disso, para referência, se ajudar, eu tenho colocado os códigos if IE depois do meu outro script html e antes