Webkit-float und display

Ich habe ein problem mit Webkit-Browsern (Chrome/Safari), CSS3 Media Queries, display und float auf meine Website. Die Standard-styling auf meiner Webseite ist auf float das element nav rechts und display:inline-block. Wenn das Fenster in der Größe verändert, um mobile Größe, Media Queries restyles es zu: float:none; display:block. Das problem entsteht, wenn der browser Größe zurück zu normal: die Navigations-element angezeigt wird, sank über den Betrag, der seiner Höhe. Hier einige Bilder und markup:

Fenster Normal und Website Richtig Angezeigt:
Webkit-float und display

Fenster-Mobile Größe, Standort Korrekt Angezeigt:
Webkit-float und display

Fenster Größe Wieder Normal, Website Falsch Angezeigt:
Webkit-float und display

Hier ist die normale styling für nav (und ja fahre ich den IE7 Zeugs in ein separates stylesheet,...)

nav {
    text-align:center;
    float:right;
    display:inline-block;
    *display:inline;
    zoom:1;
    margin-top:30px;
    *margin-top:-70px;
}

Hier ist die Medien-Abfrage, die restyles nav:

@media screen and (max-width:480px) 
{   
     header nav 
     {
         margin:0;
         float:none;
         display:block;
     }
}

So, ist das ein Webkit-bug, oder das erwartete Verhalten? Mache ich etwas falsch, oder ist mit Webkit? Wenn es ist ein bug ist, kennt jemand einen guten workarounds? Die live-site ist hier, lassen Sie mich wissen, wenn ich muss mehr info. Danke.

InformationsquelleAutor Thomas Shields | 2011-07-03
  1. 7

    Reduzierte ich es bis auf diese: http://jsbin.com/opawal/

    • Beginnen Sie mit dem Fenster breiter als 480px.
    • Kleiner machen als 480px.
    • Machen es größer als 480px.
    • "Sprung" passiert ist - um es offensichtlich ist, drücken Sie die Taste F5.

    Ist es ein bug.

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h2 {
    display: inline-block;
}
nav {
    float: right;
}
@media screen and (max-width:480px) {
    nav {
        float: none;
    }
}
</style>
</head>
<body>
<h2>h2 element</h2>
<nav>nav element</nav>
</body>
</html>
    • Ich hatte Angst, so. Danke. Kennen Sie eine mögliche Abhilfen?
    • Versuchen Sie zu erreichen das gleiche layout, aber entweder nicht nutzen float: right auf nav oder nicht verwenden display: inline-block auf h1/h2. Versuchen Sie, die Umkehrung Ihrer Nutzung float und inline-block. Oder vielleicht position: relative auf header und position: absolute auf die untergeordneten Elemente, um Sie lebensfähig. Wenn Sie nicht finden können, etwas, das funktioniert, lassen Sie es mich wissen und ich werde einen anderen Blick.
    • Schilde: Die Korrektur funktioniert für mich. float: left gelöst es sehr sauber, schöne Arbeit.
    • gut zu wissen. Vielen Dank für Ihre Hilfe.
    • Hier ist der bug report: bugs.webkit.org/show_bug.cgi?id=53166
    • Noch voll reproduzierbar :\

    InformationsquelleAutor thirtydot
Schreibe einen Kommentar