css - para - pagina web no se ve bien en internet explorer
Problemas de alineación de IE CSS (5)
Es realmente difícil saber qué está pasando aquí sin una página de demostración, pero ¿podría ser que otro elemento en la página lo baje 18 píxeles adicionales? ¿Podría ser que haya algún margen predeterminado en el elemento? No puedo pensar en otra cosa como el problema con el CSS que has dado. ¿Podrían los elementos secundarios tener un tamaño diferente en IE y en otros navegadores?
Tengo el siguiente CSS que he "pirateado" con PHP porque no se alinea correctamente en IE7. ¿Hay una mejor manera de hacer esto sin recurrir a PHP?
#Menu
{
width: 100%;
height: 32px;
padding-top: <?php if(preg_match(''/msie/i'', $_SERVER[''HTTP_USER_AGENT''])){echo ''22px'';}else{echo ''40px'';}?>;
padding-left: 13px;
}
Quiero evitar el uso de comentarios condicionales y tener que mantener varios archivos css.
Este método todavía usa algunos comentarios condicionales, pero al menos no evalúa su código a través de PHP. Para ser de mayor ayuda, necesitaría ver una muestra de código completo.
<style type="text/css">
#Menu {
width: 100%;
height: 32px;
padding-top: 40px;
padding-left: 13px;
}
</style>
<!--[if IE]>
<style type="text/css">
#Menu {
padding-top: 22px;
}
</style>
<![endif]-->
Whoa. Sí, no hagas eso. Deseará o ver el uso de "comentarios condicionales" para incluir el CSS que desee. Su primer comentarista, bendewey, ha mostrado cómo puede atacar fácilmente IE7. También hay otros tipos de comentarios condicionales que te permitirán apuntar a otras versiones de IE.
Aquí están:
<!--[if IE]> According to the conditional comment this is Internet Explorer <![endif]--> <!--[if IE 5]> According to the conditional comment this is Internet Explorer 5 <![endif]--> <!--[if IE 5.0]> According to the conditional comment this is Internet Explorer 5.0 <![endif]--> <!--[if IE 5.5]> According to the conditional comment this is Internet Explorer 5.5 <![endif]--> <!--[if IE 6]> According to the conditional comment this is Internet Explorer 6 <![endif]--> <!--[if IE 7]> According to the conditional comment this is Internet Explorer 7 <![endif]--> <!--[if gte IE 5]> According to the conditional comment this is Internet Explorer 5 and up <![endif]--> <!--[if lt IE 6]> According to the conditional comment this is Internet Explorer lower than 6 <![endif]--> <!--[if lte IE 5.5]> According to the conditional comment this is Internet Explorer lower or equal to 5.5 <![endif]--> <!--[if gt IE 6]> According to the conditional comment this is Internet Explorer greater than 6 <![endif]-->
Si planeas hacer muchos ajustes para diferentes versiones de IE, puedes planificar con anticipación y usar el truco de la "clase corporal". Se ve algo feo en el marcado, pero es una técnica probada y, a veces es mejor tener muchas hojas de estilo y etiquetas de estilo.
Aquí está:
<!--[if !IE]>--><body><!--<![endif]--> <!--[if IE 6]><body class="ie6"><![endif]--> <!--[if IE 7]><body class="ie7"><![endif]--> <!--[if IE 8]><body class="ie8"><![endif]-->
Y en su hoja de estilo, simplemente restablecería cualquier estilo que desee al marcar una clase con el selector. Me gusta esto:
#some_div { margin-top:30px; } .ie6 #some_div { margin-top:40px; } .ie7 #some_div { margin-top:50px; }
Espero que tenga sentido. De cualquier forma, son comentarios condicionales que querrás usar en lugar de PHP.
Normalmente, cuando veo que dev está haciendo este tipo de cosas, es porque no entienden lo que está sucediendo. Luego terminan con 3 copias separadas de esencialmente el mismo, enorme archivo CSS; y muchos dolores de cabeza
Comentarios condicionales de IE en un paso seguro en la dirección correcta; especialmente que el rastreo del navegador en su ejemplo de php está condenado a fallar ya que la cadena del agente de usuario no está garantizada.
Mi mejor recomendación para usted es tomarse el tiempo una vez para leer la muy aburrida documentación W3C CSS, si solo el capítulo sobre modos DISPLAY BLOCK y INLINE. Una vez que hayas leído eso, se resolverá el 90% de tus problemas de diseño CSS. El resto se está acostumbrando al error IE6 más común, que es el modo de "diseño" infrecuente.
#some_div {
_margin-top:40px; //Only works on IE6
*margin-top:30px; //Only works on IE7-IE6
margin-top:20px/9; //Only works on IE8-IE7-IE6
margin-top:10px; //Works on all others
}