CSS zur Darstellung ungeordnete Liste horizontal, im IE 6 und 7

Habe ich eine Vorlage erstellt, die für WebSVN (in Aktion sehen Sie hier) und haben hart gearbeitet, um es nutzen web-standards und Validierung. Es sieht gut aus in den meisten Browsern, aber wie ich es befürchtet habe, IE 6 und IE 7 kann das nicht so einfach es zu hacken. In meinem Fall, das problem ist, dass Sie sich weigern, zu erbringen die ungeordnete Liste für meine navigation horizontal — beide zeigen jede <li> auf einer separaten Zeile und überlauf der vorgesehenen vertikalen Raum. (IE 8 verhält sich korrekt, und sieht sehr nah an Firefox und Safari, die war eine angenehme überraschung.)

Mir bisher nicht gelungen, eine passende Lösung zu finden über Google oder SO. Ich würde lieber eine CSS beheben, statt JavaScript oder etwas ähnliches, aber das ist nicht ganz vom Tisch. (Auch ich kümmern sich nicht um die PNG-Transparenz-Problem im IE 6 — es tut nicht weh, Lesbarkeit, und IE 7 und 8 beide behandeln es perfekt.)

Edit: Hier sind die relevanten Ausschnitte der HTML-und CSS:

HTML -

<ul id="links">
  <li class="diff"><a href="comp.php?repname=BYU+CocoaHeads&amp;compare[]=%2F@552&amp;compare[]=%2F@553">Compare with Previous</a></li>
  <li class="rev"><a href="revision.php?repname=BYU+CocoaHeads&amp;">Changes</a></li>
  <li class="log"><a href="log.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;&amp;isdir=1">View Log</a></li>
  <li class="download"><a href="dl.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;isdir=1" rel="nofollow">Download</a></li>
  <li class="svn"><a href="http://dysart.cs.byu.edu/chsvn/">SVN</a></li>
  <li class="rss"><a href="rss.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;isdir=1">RSS feed</a></li>
</ul>

CSS

#links {
    padding: 0;
    margin: 0;
    text-align: center;
    background: url(images/bg-gray-light.png) repeat-x 0 top;
    border-bottom: solid 1px #a1a5a9;
}

#links li {
    font-size: 110%;
    display: inline-block;
    padding: 5px 5px 4px;
    white-space: nowrap;
}

Edit: Jetzt, dass ich eine Lösung gefunden habe, die verlinkte Seite nicht (nicht?) daneben benehmen, nicht mehr in dieser situation, aber es wird weiterhin öffentlich zur Verfügung zu stellen.

Es sieht schön.
Danke! Ich werde hinzufügen, um das WebSVN Stamm bald. Ich brauche nur auf Polnisch, einige Farben und die Tabellenüberschriften auf ein paar Seiten, aber ich bin ziemlich glücklich mit ihm insgesamt.

InformationsquelleAutor Quinn Taylor | 2009-08-24

  1. 2

    Es stellt sich heraus, dass IE 6 und 7 nicht implementieren inline-block als erwartet. Sieht aus wie ich eine gute Lösung gefunden, obwohl... Mit den folgenden CSS für diejenigen arbeitet, die Browser, und erhält die richtige Formatierung in neueren Browsern:

    #links {
    padding: 0 0 4px;
    margin: 0;
    text-align: center;
    background: url(images/bg-gray-light.png) repeat-x 0 top;
    border-bottom: solid 1px #a1a5a9;
}

#links li {
    font-size: 110%;
    display: inline-block;
    padding: 5px 5px 0;
    white-space: nowrap;
}

* html #links li {
    display: inline;
}

    Ich verachte IE-hacks.... Ich bin stark bedenkt, darunter Pushup in meinem template.

    Im IE6/7, inline-block funktioniert nur auf Elemente, die inline standardmäßig (Anker, spannt).

    InformationsquelleAutor Quinn Taylor

  2. 0

    Es funktioniert bei mir im IE8 mit Kompatibilitäts-Modus.

    Die einzige potenzielle problem, das ich sehen kann, ist Sie nicht die Ränder angeben, die auf die Elemente der Liste. Versuchen Sie margin:0 und sehen, ob das hilft.

    Wie ich bereits erwähnt, IE 8 ist nicht ein problem, es funktioniert gut dort. Es ist IE 6 und 7 Probleme.
    IE8 Kompatibilitätsmodus == IE7. Jedenfalls, stellt sich heraus, ich war das betrachten Ihrer festen Seite, die display:inline auf der Liste.
    Touché. Ich merkte, ich hatte es geändert und rückgängig gemacht, es für heute. Froh zu hören, dass "IE7" macht es richtig, wie gut. Entfernen mein downvote.

    InformationsquelleAutor DisgruntledGoat

  3. -1

    Zuweisung float:left auf die li-Elemente funktionieren sollte, wenn ich mich Recht erinnere.

    Das Menü wäre nicht zentriert werden, dann...
    Wahr. Sollte ich habe geklickt, link...

    InformationsquelleAutor Simon

Schreibe einen Kommentar