2009-03-11 10 views
17

Hace unos días rejuvenecí mi sitio web. El desarrollo de esta máscara se realizó principalmente con Safari, y como era de esperar, todo funciona bien con Firefox y Opera. He tenido que hacer algunos pequeños ajustes para IE7, pero nada más, excepto un problema ...IE7 está recortando mi texto. ¿Cómo ajusto su actitud?

Los indicadores de fecha para una publicación se cortan en IE. Este problema parece ocurrir solo en etiquetas de span anidado dentro de un div flotante izquierdo. Creo que necesito los div flotantes para diseñar el texto en el lado izquierdo y el derecho de la pantalla.

¿Alguno de ustedes sabe cómo evitar que IE7 recorte mi texto?

Editar: Tengo un tipo de abandono en este problema. Mis scripts ahora verifican IE7 y lo alimentan con un HTML algo simplificado que su motor limitado puede manejar. Funciona en IE8, así que, por ahora, solo el caso especial para IE7 tendrá que hacer ...

+2

+1 No puedo proporcionar una idea sobre este problema, pero le doy los apoyos para poner un esfuerzo genuino en la pregunta. ¡Forma de dar un ejemplo! –

+0

gran pregunta, aprecie el esfuerzo para explicar exactamente cuál es el problema –

+0

He copiado su fuente y he jugado con ella pero no he podido encontrar una solución limpia. Aunque tengo la sensación de que algo huele a un nivel general. ¿y si IE realmente hace lo correcto? Nunca antes había visto a nadie haciendo un desbordamiento de fuentes. – markus

Respuesta

0

para la clase .bigdate, intente reemplazar el margen con relleno; me parece que esto tiene algo que ver con el manejo de márgenes de IE.

1

Intenta agregar desbordamiento: visible; a su clase .postdate. Tal vez eso ayude.

0

Adición de una altura específica a .title correcciones para mí (en IE6):

.title { 
    PADDING: 0 10px 0 0; MARGIN-top: 0.3em; FLOAT: right; height: 1em; 
+0

Sí, pero menos suerte con IE7. Interesante es que cuando veo los divs y spans usando la barra de herramientas de desarrollo de Internet Explorer, ¡los cuadrados que dibuja alrededor de ellos son del tamaño correcto! Parece ser solo recorte cuando renderiza. – Emiel

+0

¿Por qué los topes en las propiedades? – alex

+0

¿Por qué las tapas? Buena pregunta, probablemente creada por IE cuando utilicé la página web 'Guardar como' completada, solo agregué la 'altura'. No lo guardé después de ajustarlo, así que no pude decir con certeza. – Traingamer

0

A pesar de ser incapaz de probarlo en mi máquina actual: sospecharía que es un hasLayout bug. Los métodos para manejarlo se enumeran en la sección "properties" de ese enlace.

19

En la mayoría de los casos en IE6 o 7 cargadores de la parte inferior del texto, basta con añadir:

line-height: normal; 

a las reglas CSS en cuestión. Debería arreglarlo bien, pero como comprenderán, también expande la caja.

0

En mi experiencia es invariablemente la parte inferior del texto que se recorta y eso también, básicamente, debido a las divisiones superpuestas. Si puede asegurarse de que los divs no se superpongan, entonces el problema se resuelve. Aparte de desbordamiento adicional: visible ayuda a veces.

0

Trate de añadir

div.postmeta { height: 100px; } 
div.postdate { height: 75px; } 

valor de altura arbitraria ... pero te conocer la altura exacta que desea. Eso debería evitar que los contenedores de texto se recorten en IE7.

11

Hay un truco que descubrí que soluciona el problema de cortar texto en IE. Noté que la última línea en mi título era la única que se cortaba.

Mi CSS original que estaba cortando la última línea en IE7, pero se veía bien en otros navegadores:

h2 { 
    font-size: 22px; 
    line-height: 1em; 
} 

Ver imagen del problema aquí: https://skitch.com/pablohart/f4g3i/windows-7-x64

La solución me incluyo la simple adición de relleno para la parte inferior y luego tomar ese relleno con margen negativo.De esta manera:

h2 { 
    font-size: 22px; 
    line-height: 1em; 
    padding-bottom: 5px; 
    margin-bottom: -5px; 
} 

Ver la imagen de la solución en esta imagen: https://skitch.com/pablohart/f4g4h/windows-7-x64

El problema con line-height: normal; es que toma la altura de línea predeterminada para la fuente, generalmente 1.3em.

+0

¡Oh, por el amor de Dios, gracias por esta respuesta ... esto me estaba volviendo loco! – potench

+0

¡Esto solucionó mi problema! Establecer el alto de la línea a cualquier cosa no funcionó o mostró una línea de texto adicional, pero solo tiene de ella. Añadiendo relleno de fondo fijo mío. Mi problema fue el texto js generado dentro de un 'textarea'. – jlafay

1

Tuve un problema similar. Cambié mi palmo a un div y el problema fue resuelto. Creo que IE7 podría tener un problema al procesar la altura de línea en un tramo. No he confirmado que ese sea el problema. Hubo otros elementos de CSS. (Trabajar con el código de otra persona). Pero cambiar de span a div (bloque) resolvió el problema.

0

Creo que el problema es con el relleno. Traté de eliminar un estilo "relleno: 3px" y funcionó correctamente. Anteriormente no mostraba nada. La respuesta de Paul Hart me mostró eso.
Probablemente también eliminar/anular las propiedades de margen también puede ayudar.

Cuestiones relacionadas