Menüs mit ungeordnete Listen w/ und w/o-carriage returns unterscheiden sich im IE 6

Ich entschuldige mich für die überschrift, ich weiß wirklich nicht, einen besseren Weg, es zu setzen (lassen Sie mich wissen, wenn Sie eine bessere Weise, ich werde es ändern). Bitte betrachten Sie den folgenden code:

<html>
    <head>
        <title>IE 6 Menu Test</title>
        <style type="text/css">
            .nMenu {
                border: 1px solid black;
            }

            .nMenu ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }

            .nMenu a {
                display: block;
                padding: 3px 0px 3px 5px;
                background-color: #fff;
                border-bottom: 1px solid #eee;
                font-weight: bold;
                text-decoration: none;
            }

            .nMenu a:hover {
                background-color: #dddddd;
            }
        </style>
    </head>
    <body>
        <div class="nMenu">
            <ul>
                <li><a href="">One</a></li><li><a href="">Two</a></li><li><a href="">Three</a></li><li><a href="">Four</a></li><li><a href="">Five</a></li>
            </ul>                        
        </div>

        <hr />

        <div class="nMenu">
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
                <li><a href="">Four</a></li>
                <li><a href="">Five</a></li>
            </ul>                        
        </div>
    </body>
</html>

In firefox, sowohl die oberen und unteren Menüs display genau das gleiche. Aber im IE6, die untere version, die identisch ist mit der oben, außer für die Beförderung zurück nach jedes element in der Liste zeigt, mit extra-Polsterung über jedem element. Die top-version, ohne die Zeilenumbrüche nicht. Dies wird besonders deutlich (die extra-Polsterung) beim Rollen über die Elemente in der unteren Liste.

Scheint es, dass der IE6 rendering ist der Wagen zurück aus irgendeinem Grund. Für jetzt haben wir nur gegriffen, um die Formatierung unserer code-wie das Obere Beispiel, aber dies ist weniger als ideal. Gibt es etwas, das können wir in der CSS, um das korrekte Aussehen im IE6?

InformationsquelleAutor Ryan Guill | 2009-02-03
  1. 7

    Gelten display: block; zu den li, sagen, IE6, um die a 100% in der Breite, und sagen, alle Browser zum anzeigen der a als block statt.

    .nMenu li { 
display: block; 
} 

/* hack für IE6 */
* html .nMenu ein 
{ 
Breite: 100% 
} 

.nMenu a { 
display: block; 
padding: 3px 0px 3px 5px; 
background-color: #fff; 
border-bottom: 1px solid #eee; 
font-weight:bold; 
text-decoration:none; 
}

    Versucht, es in IE6 und beide Listen identisch Aussehen, und macht genau das gleiche in Firefox.

    • Dies funktioniert, entfernen Sie die zusätzliche Leerraum oben und unten, aber nicht die hintergrund-Farbe auf die gesamte Zeile auf schweben, wie es funktioniert, wenn die Klasse angewendet wird, um die <a>.
    • Anwendung von display:block auf einer split-li-element für den IE in zwei Teile: den link-block und leere text-element, eine auf der Oberseite des anderen. Mit block angewandt, um li haben Sie block, um deinen link gefolgt von einen leeren text.
    • Nicht sicher, was du meinst buti-oxa. Könnten Sie ein Beispiel geben? Ryan, habe ich korrigiert mein Beispiel oben, hoffentlich dies sollte den trick tun. Sie kann ersetzen mein IE6 hack mit jedem IE6-hack 🙂
    • Ich habe gerade erklärt, warum Ihr Lösung funktioniert. (Ich hatte Angst, es sieht aus wie Magie, um einen reader.) MS-Developer-Toolbar zeigte mir, was IE "im Auge hatte".
    • Ah, hehe, habe ich dich missverstanden 😉 danke für die Erklärung!
    • Ja, diese Lösung funktioniert perfekt.

    InformationsquelleAutor baxter
  2. 1

    Ich habe nicht eine Lösung für das wichtigste Problem, aber Sie könnte sich ändern, Ihre code-Formatierung, um schöner Aussehen und immer noch funktionieren im IE 6.

    <div class="nMenu">
    <ul>
        <li><a href="">One</a></li
        ><li><a href="">Two</a></li
        ><li><a href="">Three</a></li
        ><li><a href="">Four</a></li
        ><li><a href="">Five</a></li>
    </ul>                                           
</div>
    • Interessanter Ansatz - Wunder, wenn Leerzeichen innerhalb der tags wird akzeptiert durch den W3C-validator.
    • Dies ist ein interessanter Ansatz, und zwar möglicherweise besser lesbar, ich würde sagen, es ist weniger haltbar. Ich würde lieber sehen, keine Wagenrückläufe, denke ich.
    • Ja, es ist sicherlich weniger als ideal, aber dann wieder so ist der Umgang mit dem IE 6. 😉
    InformationsquelleAutor David Kolar
  3. 0

    Versuchen Sie overflow: hidden; zu .nMenu li.

    • Ich möchte sicherstellen, dass ich Sie richtig verstanden, fügte ich hinzu: .nMenu li { overflow: hidden; } auf meiner css an der Spitze. Aber dieses scheint nicht, etwas zu ändern IE6. Hab ich das missverstanden?
    • Das ist es, was ich meinte, aber seltsam, es hat nicht funktioniert. Versuchen Sie, es auf die eine statt.
    • gleiche Sache, wenn Sie es das eine.
    InformationsquelleAutor Ross
Schreibe einen Kommentar