¿Cómo puedo solucionar esta anomalía de CSS?

Tengo lo que creo que es un CSS bastante básico, y se comporta de manera diferente en FF4 e IE8.¿Cómo puedo solucionar esta anomalía de CSS?

El CSS en cuestión es la siguiente:

div.showme { 
    border: 1px dotted blue; 
    position: absolute; 
    top :10px; 
    bottom :10px; 
    left: 1%; 
    right: 33%; 
    overflow: auto; 
    padding: 0.8em 1em 0.8em 1em; 
    line-height:1.75em; 
    } 

    div.showme a { 
    padding: 0em 5px 0em 5px; 
    margin: 0; 
    white-space: nowrap; 
    color: #FF00FF; 
    background-color:#E6E6FA; 
    border: 1px solid grey; 
    padding: 0em 4px 0em 4px; } 

    div.showme a:link  { color: blue; } 
    div.showme a:visited { color: #1E90FF; } 
    div.showme a:active  { color: red; }

El HTML relevante es el siguiente:

<div class='showme'> 
    <a href='one'>one</a> 
    <a href='two'>two</a> 
    ... 
</div>

El problema es que no se muestra constantemente el relleno, en IE8.

enter image description here

En Firefox, funciona como me esperaba.

ejemplo de trabajo:
http://jsbin.com/ogosa4

Usando la demostración de trabajo anterior, si cambia el tamaño de la ventana verá el relleno en el elemento "líder" en cada línea dentro del div, el cambio de cero a distinto de cero .

¿Cómo puedo solucionar esto?

Fuente

2011-05-11 Cheeso

+1 para la pregunta impresionante que me gustaría saber la respuesta también. ¿Has probado 'reset.css'? – pixelbobby

En realidad, cuando lo vi por primera vez, tuve el css de yahoo reseteado en la página. Eliminé eso de la demostración simple porque creo que es extraño. – Cheeso

Los defectos de IE generalmente se cumplen con 'extraneous.css': | Dejaría a una chica si usa IE 6 ... no va a mentir. – pixelbobby

Si agrega display: inline-block; a su div.showme a {} el relleno se aplicará en IE también, pero tiene cierto impacto con la altura de la línea y es posible que tenga que especificar

Fuente

2011-05-11 16:24:03 DanielB

+1 No estoy del todo seguro, pero esto huele como una buena respuesta. – pixelbobby

'inline-block' es asombroso, pero tenga cuidado con esto si necesita soportar IE7 (o peor, IE6), en cuyo caso puede necesitar usar hacks de navegador. – Spudley

Lo sé, pero me preguntó sobre IE8, así que pensé que valía la pena publicarlo. – DanielB

he visto este comportamiento del margen adicional en Opera también. El relleno va a la línea superior. Trate display: inline-block y white-space:nowrap si tiene más de una palabra en el enlace ...

Usted puede utilizar con seguridad en IE7 inline-block con etiquetas en línea.

Fuente

2011-05-11 18:44:17

¿Cómo puedo solucionar esta anomalía de CSS?

Respuesta

Cuestiones relacionadas