He tenido algunos problemas importantes con un diseño que estoy haciendo específicamente en Internet Explorer. Sé que IE convierte el ancho y las alturas de manera diferente cuando hay bordes y relleno, así que incluí códigos en mi CSS para que la navegación se vea igual en IE que en Mozilla y Chrome.

Sin embargo, el problema que tengo ahora es que tengo una animación jquery ejecutándose en mi navegación y está en mal estado en IE, la mayor parte debido a las diferencias de altura entre mi código de Mozilla / Google y los detalles específicos de IE. He buscado en varios sitios y he creado un archivo jquery separado con los parámetros de altura para que la navegación se vea bien en IE, pero por alguna razón IE está tirando de menu.js en lugar de iemenu.js

Encontré varios sitios con diferentes bits de código para intentar forzar a IE a leer iemenu.js en lugar de menu.js mientras que los otros navegadores leen menu.js. Desafortunadamente, por alguna razón, IE no leerá iemenu.js, sino que leerá menu.js.

Yo he tratado

<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>

También he intentado

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

Otro que encontré que no funcionó tan bien:

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

Otro problema que tengo es la animación, que hace que la navegación se reduzca en altura y luego regrese a su tamaño normal cuando se quita el mouse, es extremadamente irregular cuando incluyo el relleno en el CSS para que el texto se mueva un poco hacia abajo . He probado esto sin el relleno y la animación funciona bien, pero aproximadamente la mitad del texto se corta después de hacer la animación. También he intentado usar el complemento hoverintent que no solucionó el problema de falla.

Aquí hay una muestra de la navegación CSS:

.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 */
 }

Y aquí está el código jquery. Tanto iemenu.js como menu.js están construidos de la misma manera, solo tienen diferentes valores de 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);
});



});

He intentado casi todos los trucos de reparación de IE en el libro que conozco y he encontrado en línea aquí y en otros sitios y nada parece funcionar hasta ahora ... Trabajo en IE 7.

Además, como referencia si ayuda, he estado poniendo los códigos if IE después de mi otro script html y antes