relleno ni siquiera en IE

Question

Si pega el siguiente código en un test.html y navega con Firefox, está bien. Pero si navega con IE, puede ver que hay más espacio a la derecha del elemento <a>:

<style>
li { 
    display:inline;
    margin:0 90px;
    padding:6px 12px;
    background:#777777 none repeat scroll 0 0;
}



li a {
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
}
</style>


<div id="tabs">
    <div class="nav">
        <ul>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
        </ul>
    </div>
</div>

EDITAR : ¿Cómo hacer el texto incluso en IE?

Answer 1

Para responder a su pregunta simplemente: coloque todos sus li elementos en una sola línea o flótelos.

Answer 2

Miré tu fuente y lo probé por mí mismo.

En Firefox 3.0.11 e Internet Explorer 8 mostraba páginas prácticamente idénticas.

Una cosa que puedo decir es que las páginas se veían diferentes inicialmente porque mis navegadores tenían diferentes anchuras, pero no el problema de margen que tenía. En mi caso, cambiar el tamaño del navegador funcionó.

Pero el problema que tienes es común. Internet Explorer casi siempre mostrará páginas diferentes de las que lo haría un navegador que cumple con los estándares. Una forma en que la gente ha descubierto que puede solucionar esto (y esto muy bien puede resolver su problema) es usar una hoja de Restablecimiento CSS.

Algunos buenos son:

• Restablecer CSS de Eric Meyer
• Yahoo! YUI Restablecer CSS

Answer 3

El problema es un desafortunado desacuerdo entre los navegadores sobre dónde decide el modelo de cuadro CSS qué hacer con el relleno:

• IE disminuye el espacio para el contenido dentro de un div cuando aumenta el relleno, por lo que mantiene el tamaño del div igual
• Firefox aumenta el tamaño div con el relleno, manteniendo el tamaño del contenido igual.

Answer 4

Probado en IE6, parece agregar un espacio extra a las etiquetas de anclaje. Cópialo y pégalo y lo verás por ti mismo. Firefox no agrega el espacio extra.

Puede cambiar el margen para IE si lo desea. No es una solución perfecta, pero puede ayudarlo a hacer que las pestañas se vean similares. Si necesita que sea idéntico en todos los navegadores, siempre puede usar una imagen en su lugar. Pero intente esto:

li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}

*html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}

*+html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}