2009-02-09 6 views
6

Ich versuche, mit einem IE7-Fehler in meiner Anwendung zu beschäftigen. Hier ist der HTML/CSS-CodeIE7: ein übermäßiger Rand in Formular für 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> 

In Firefox/Opera/Webkit/IE6 es ist in Ordnung, aber in IE7 hat das Textfeld eine 100px Rand links. Wenn jemand einen Tipp hat, dies zu korrigieren, vielen Dank! Hier

ist ein Screenshot von IE7 Darstellung dieser Probe HTML:

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

+0

Was für einen Doctyp benutzt du? – mbillard

Antwort

4

total seltsam. Ich bekomme tatsächlich einen 320px (= Eltern Div Marge) in ie7.

Sie können mit einem IE7 überschreiben nur negativen Marge, aber das ist schrecklich ...

EDIT: OK, ich habe keine Ahnung, warum das funktioniert, aber es funktioniert. dies ist definitiv ein Fehler:

<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

Vielleicht möchten Sie etwas Betonung auf die ** Anzeige: Inline-Block; ** – mbillard

3

scheint für < Fieldset einen Fehler mit IE Standardstil zu sein>. Meine Vermutung wäre, dass IE intern Feldsätze mit float Code formatiert und den berüchtigten Double-margin bug auslöst.

Ich schaffte es, den Fehler einfach zu besiegen, indem ich einen Wrapper < div> direkt innerhalb < fieldset>.

7

Dies sieht aus wie der vererbte Rand Bug (ähnlich, aber anders als der Doppelrand Fehler mit Floats). Die Textfläche erbt den Rand vom div um das Formular. Position Is Everything describes it in more detail.

Die praktischen Abhilfen sind:

  • das Textfeld einen negativen linken Rand von -320px Geben Sie (nur für IE, natürlich).
  • Fügen Sie ein Inline-Element vor dem Textfeld ein, aber innerhalb des Feldsets. Es sieht so aus, als könnten Sie den anzuzeigenden Stil festlegen: Keine, aber das Element darf nicht leer sein.
  • Wickeln Sie das Textfeld in ein div/span/any-other-Tag, solange es keine Stilregel hat, die es Layout gibt (ich hätte eigentlich gedacht, dass das Formular oder das Feldset es beheben würde, aber anscheinend nicht t).
3

anderen (auch schrecklich) Lösung wäre, die &nbsp; gerade vor <textarea> hinzufügen ... aber IMHO, ich bin ok mit kämpfen schmutzig IE Bugs mit drity Lösungen ... Feuer mit Feuer, wenn du wirst ...;)

+0

Ich habe dies etwas erweitert:   , das war eine einfache Lösung und nur zeigt den Raum auf den armen Seelen, die auf XP stecken. – Jake1164