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.

http://jsbin.com/upexu/edit

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

CSS display: inline-block funktioniert nicht im IE7

IE7

CSS display: inline-block funktioniert nicht im 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,
InformationsquelleAutor alex | 2010-01-14
Schreibe einen Kommentar