disco a la izquierda del elemento de la lista se muestra en la parte inferior

Question

Captura de pantalla de lo que está sucediendo:

Es sólo un elemento de la lista en una lista en underordered, esto está sucediendo en IE7 y en ninguna otra parte.

<ul> 
    <li>Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text.</li> 
</ul> 

.fancybox-entry.computer-policy li { 
    float:none; 
    width:100%; 
    list-style-type:disc; 
    margin-bottom:10px; 
} 

.fancybox-entry.computer-policy ul + p { 
    margin-bottom:20px; 
} 

.fancybox-entry.computer-policy ul { 
    margin:5px 0 10px 25px; 
} 

Cualquier ayuda sobre por qué está haciendo eso y se aprecia una solución.

Answer 1

Parece que el ancho de la propiedad CSS desencadena hasLayout para el elemento li en IE7. Primero intente eliminar la declaración width:100%; para asegurarse de que la viñeta aparezca en el lugar correcto. Si no puede prescindir de la propiedad de ancho, puede usar position: relative; y vertical-align: top; para volver a colocar la viñeta en su lugar, como se describe en http://www.gunlaug.no/tos/moa_26.html.

Tenga en cuenta que el código en esa página utiliza hacks para atacar IE6 e IE7. Recomiendo el uso de los comentarios condicionales en su lugar, de este modo:

<!--[if IE 7]> 
    <style type="text/css" media="screen"> 
    /* IE7-specific CSS here */ 
    </style> 
<![endif]--> 

Answer 2

Mi reputación es todavía demasiado bajo para comentar, de lo contrario habría añadido esto a la respuesta de peterjmag. (Tal vez él puede incluirlo ...)

La propiedad de ancho es el culpable, pero sugeriría un cambio diferente. Para asegurarse de que los elementos de su lista ocupen todo el ancho en IE7, use "width: auto" en su lugar. Esto le dará el mismo aspecto y sus viñetas ocuparán su lugar. He encontrado que "vertical-align: top/text-top" empuja las viñetas un poco al norte de donde me gustaría.

Si no tiene clases condicionales o una hoja de estilos de IE, simplemente use "* width: auto" para apuntar a IE7.