Wie IE7 float-clear Kombination beheben
-
20-09-2019 - |
Frage
Ich habe eine field_wrapper Klasse div, die den drei Unter divs FIELD_LABEL enthält, field_input und field_error
Ich brauche die FIELD_LABEL, field_input nebeneinander und field_error unter den ersten zwei setzen.
Bitte beachten Sie unter CSS-Code zu wissen, wie ich dieses Ziel erreicht, Mein Problem ist, sein funktioniert nicht in IE7. sowohl auf die field_error angewendet klar ist, funktioniert nicht.
Auch nach langer Zeit googeln ich nicht eine richtige Methode, um dieses Problem beheben, ohne das Hinzufügen des HTML-mark-up finden kann. Bitte Beratung css Spitze oder eine andere Methode zu vermeiden, zusätzlichen Markup-Code
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#FF0000;
float: right;
text-align:left;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name">
</div>
<div class="field_error">
<p>The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">
Address
</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
<div class="field_error">
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit">
</div>
</form>
Lösung
Wenn Sie nicht über den Schwimmer entfernen möchten links. Sie können diesen Wrapper-Code verwenden
.field_wrapper { display: inline-block; }
.field_wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .field_wrapper { height: 1%; }
.field_wrapper{ display: block; }
Es funktioniert für mich jedes Mal (IE6 als auch)
Update:
ich dies sah wieder und änderte das Markup ein wenig, machte es auch valid xhtml. setzen die Klasse einfach auf dem P-Tag, Sie müssen nicht extra div benötigen.
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#f00;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name" />
<p class="field_error">The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">Address</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit" />
</div>
</form>
Andere Tipps
Remove float: right von 'field_error'
Lassen Sie mich Ihnen sagen, eine Sache zuerst. wenn Sie in einem Behälter schwimmenden Inhalt mit den Behältern nie, bis enthalten und wenn Sie die Container-Überlauf-Eigenschaft auf versteckt gesetzt oder auch es Sie machen schweben. wie
.field_wrapper
{
clear:both;
overflow:hidden;
}
Jetzt enthalten sie alle Floating-Element. Jetzt für Ihre Fehler div wie Sie Sie Elemente nach links schweben, so klar zu machen:. Links nur und es wird funktionieren
Danke