CSS display: inline-block funktioniert nicht im IE7
Habe ich das, einfach zu erklären, mein problem. Es ist eine Liste der Elemente angezeigt wird, wie inline-Blöcke. Ich hatte eine originelle Methode, das hat nicht funktioniert, so habe ich diese CSS.
Dies funktioniert im FF und IE7 als standalone.
Leider in meiner Implementierung auf meiner Seite, es nicht richtig angezeigt im IE7 (Sie werden übereinander gestapelt).
Firefox
IE7
Nun kann mir jemand sagen, warum Sie nicht arbeiten, in meinem Beispiel (siehe Bilder oben und schauen Website, es ist ganz rechts (nicht zu übersehen).
Scheint es zu funktionieren im IE7 wenn ich die Elemente der Liste eine explizite Breite - aber das scheint gefährlich zu sein, sowie ein extra Stück von der Wartung, die ich nicht tun will. Ich könnte wahrscheinlich tun li#nsw { width: 3.5em }
aber ist hässlich und ich sollte nicht müssen.
Verwende ich Eric Meyer ' s CSS Reset Reloaded.
Wenn Ihr wisst eine Lösung, bitte sagen!
Dank.
Update
Hier ist der HTML-Code der Checkboxen
<ul class="checkboxes">
<li><input type="radio" id="free-case-review-nsw" value="nsw" name="state" /><label for="free-case-review-nsw"><acronym title="New South Wales">NSW</acronym></label></li>
<li><input type="radio" checked="checked" id="free-case-review-qld" value="qld" name="state" /><label for="free-case-review-qld"><acronym title="Queensland">QLD</acronym></label></li>
<li><input type="radio" id="free-case-review-nt" value="nt" name="state" /><label for="free-case-review-nt"><acronym title="Northern Territory">NT</acronym></label></li>
<li><input type="radio" id="free-case-review-other" value="other" name="state" /><label for="free-case-review-other">Other</label></li>
</ul>
Und hier ist der CSS -
#free-case-review-form .checkboxes {
border: 1px solid #000;
padding: 5px 0;
margin-bottom: 8px;
overflow: hidden;
}
#free-case-review-form .checkboxes li {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* for ie */
zoom: 1;
overflow: hidden;
}
#free-case-review-form .checkboxes li input {
display: inline;
width: auto;
border: none;
margin-bottom: 0;
padding: 0;
float: left;
}
#free-case-review-form .checkboxes li label {
display: inline; /* just an attempt - they should be block level anyway */
float: right;
}
Obwohl ich empfehlen, sich auf der Webseite über, als viel mehr CSS übernommen wird, insbesondere durch Verwendung des style-reset.
- Sollten Sie post von der eigentlichen html + css. Es ist schwer zu bekommen, die html von der Seite, weil der html-Code wird gebaut
- Dieser header ist wirklich böse! Speziell, weil, wie es ist nicht gemacht in flash Flashblock hat nicht blocken 😛 I wan ' T my Webseiten als mein Auto Reisen: nicht überraschend und mit wenig unerwarteten Bewegungen/Ablenkungen.
- Können Sie FireBug zum anzeigen der HTML-Code aus dem Formular. Ich poste einen Auszug sowieso,
Du musst angemeldet sein, um einen Kommentar abzugeben.
Soweit ich das beurteilen kann, ist es die "float: right" auf die css-Datei für das Etikett. Was auch immer Sie tun, versuchen Sie, es zu tun, ohne das float: right auf dem Etikett.
wenn ich entfernt "float: right" ging es zurück zum inline auf meinem IE.
Wahrscheinlich, dass Sie versehentlich ausgelöst
hasLayout
auf 1 von den Kindern, entweder dieinput
oder dielabel