2009-02-09 15 views
6

Estoy tratando de manejar un error IE7 en mi aplicación. Aquí está el código HTML/CSSIE7: un margen excesivo en la forma de textarea

<div style="margin-left: 320px"> 
    <form method="post" action=""><fieldset> 
     <textarea name="prj_comment" id="prj_comment" rows="5" cols="50" 
        style="margin: 0; padding: 0"></textarea> 
    </fieldset></form> 
</div> 

En Firefox/Opera/Webkit/IE6 está bien, pero en el área de texto IE7 tener un 100px margen izquierdo. ¡Si alguien tiene un consejo para corregir esto, muchas gracias!

Aquí está una captura de pantalla de Internet Explorer 7 que muestra este ejemplo HTML:

http://daneel.net/pub/img/ie7_bug_decalage.jpg

+0

¿Qué tipo de documento usa? – mbillard

Respuesta

4

totalmente extraño. De hecho, obtengo un 320px (= margen Div) en ie7.

Puede sobrescribir con una única IE7 margen negativo, pero eso es horrible ...

EDIT: bien, no tengo ni idea de por qué esto funciona, pero funciona. este es sin duda un error:

<div style="margin-left: 320px; display:inline-block;"> 
    <form method="post" action=""><fieldset> 
     <textarea name="prj_comment" id="prj_comment" rows="5" cols="50" 
        style="margin: 0; padding: 0"></textarea> 
    </fieldset></form> 
</div> 
+0

Es posible que desee poner un poco de énfasis en la ** pantalla: en línea-bloque; ** – mbillard

3

parece ser un error por el estilo predeterminado de IE para < fieldset>. Creo que internamente, IE está diseñando conjuntos de campo usando el código float y activando el infame Double-margin bug.

Pude derrotar el error simplemente colocando un contenedor < div> directamente dentro de < fieldset>.

7

Esto se parece al error de margen heredado (similar pero diferente del error de doble margen con flotadores). El área de texto está heredando el margen del div alrededor del formulario. Position Is Everything describes it in more detail.

Las soluciones prácticas son:

  • Dale el área de texto de un margen negativo izquierda de -320px (para IE sólo, obviamente).
  • Ponga un elemento en línea antes del área de texto, pero dentro del fieldset. Parece que puede configurar el estilo para mostrar: ninguno, pero el elemento no puede estar vacío.
  • Envuelve el área de texto en una etiqueta div/span/any-else siempre que no tenga ninguna regla de estilo que le proporcione diseño (de hecho, pensé que la forma o fieldset lo arreglaría, pero aparentemente no 't).
3

otra solución (también horrible) sería añadir el &nbsp; justo en frente de <textarea> ... pero en mi humilde opinión, yo estoy bien con la lucha contra los insectos IE sucios con soluciones drity ... el fuego con fuego si usted ...;)

+0

Terminé expandiendo esto un poco:   , esta era una solución simple y solo muestra el espacio en las pobres almas atrapadas en XP. – Jake1164

Cuestiones relacionadas