2013-04-04 10 views
16

Ich verwende eine Bildlaufleiste auf einem Div und es scheint ein Rendering-Problem in IE10 zu haben.IE10 Problem mit Bildlaufleiste auf Div

Wenn Sie blättern, um die div den ganzen Weg nach unten nach oben, dann wieder wird der obere Inhalt fehlt.

Wissen Sie, ob es eine Lösung für IE10 ist?

-Link: http://landpros.com/propsearch.php

Hier ist die CSS auf dem div:

.prop-search-content-wrapper{ 
    margin: 0 0 30px 0; 
    padding: 0; 
    height: 980px; 
    overflow-x:hidden; 
    overflow:scroll; 
} 

Thank you!

enter image description here

+1

Können Sie nach einem Screenshot von dem, was fehlt. Mir fällt nichts auf, was mir fehlt. Hier – Leeish

+0

ist, wie es aussieht gebrochen: [Bild Beschreibung hier eingeben] [1] [1]: http://i.stack.imgur.com/JqYhq.png – heathers

+0

Sorry, das nicht funktionierte wie ich wollte, aber der Link zeigt ein Bild. Funktioniert es? – heathers

Antwort

3

ich dies zu reproduzieren habe es geschafft - die Ursache des Problems zu sehen (ich glaube) schalten Sie die overflow-x: hidden Richtlinie. Wenn der Inhalt fehlt, kommt er zurück und Sie erhalten eine vertikale Bildlaufleiste. Es passiert etwas, was den IE10 dazu bringt zu glauben, dass er die ganze (n) oberste (n) Zeile (n) verstecken muss.

Der Fix sollte sein, um Ihre Breiten von jedem Inhalt des enthaltenden div mit Klasse content-wrapper auf die Eltern anzupassen und nie brauchen overflow-x: hidden; an erster Stelle.

* Anmerkung: Ich kämpfte konsequent zu reproduzieren.

3

Ich war das Problem zu reproduzieren mit meinem IE 11 IE emuliert 10 mit den Entwickler-Tool nicht in der Lage. Aber ich stimme mit Matthew überein, dass es höchstwahrscheinlich auf die overflow-x: hidden Einstellung zurückzuführen ist.

Sie können es leicht vermeiden!

Werfen Sie einen Blick auf Ihre foundation.css-Datei (in Zeile 233 und 235):

.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -10px; } 

Neben der Tatsache, dass die Regel zweimal vorhanden ist, Ihr „Problem“ ergibt sich aus den negativen linken und rechten Rand. Du brauchst sie nicht, also entferne sie einfach!

Auf diese Weise gibt es keine Notwendigkeit mehr für die overflow-x: hidden Einstellung.
BTW: Warum setzen Sie die max-width auf none anstelle von 100%, wenn Sie nicht wollen, dass ein Element horizontal seine Eltern überläuft?

Also versuchen Sie es bitte und lassen Sie uns wissen, wenn diese Korrekturen (verhindert) Ihr Problem - danke!