2012-03-30 8 views
0

Ich habe Probleme mit horizontalen Bildlaufleisten auf meinem Container in IE und FF, aber alles ist in Ordnung in Chrome. Die Seite ist 1200px breit, in Chrome, wenn das Browserfenster unter 1200px ist, erhalten Sie die horizontale Bildlaufleiste wie erwartet, aber in IE und FF gibt es eine horizontale Bildlaufleiste, selbst wenn das Fenster über 1200px ist, das zu nichts als weiß scrollt Raum.Containerüberlauf, gut in Chrome, komisch in IE/FF

Ich möchte den Überlauf nicht auf Versteckt setzen, da dann überhaupt kein Scrollen stattfindet. Es gibt einen festen Header, obwohl ich ein Problem haben könnte, aber es bleibt bestehen, auch nachdem ich den Header absolut gemacht habe.

Ich denke, anstatt Codeschnipsel von einer vollständigen Website zu veröffentlichen, sollte ich einfach die betreffende Seite verlinken?

http://www.ekmpowershop21.com/ekmps/shops/collective_ret/index.asp

Wenn jemand etwas Licht in das Dunkel bringen könnte, die fantastisch sein würde. Es ist mehr ein Ärgernis als alles andere, aber würde immer noch gerne meinen Fehler korrigieren, wenn möglich.

Edit: eine Lösung gefunden, siehe Antworten

+1

Ich bekomme das gleiche Verhalten zwischen FF, IE und Chrome auf dem PC. –

+0

Danke für die Info, ich denke, ich habe es selbst behoben, so gut zu wissen, dass es anderswo funktioniert – Bantros

Antwort

1

overflow:hidden; Clips der Inhalt. Wenn der Inhalt jedoch nicht auf den Bildschirm passt, wird natürlich ein Bildlauf ausgeführt. Beim Überlauf wird der Inhalt nur entsprechend den Abmessungen des Containers abgeschnitten. Probieren Sie es einfach aus und Sie werden sehen, dass es funktioniert. Ich habe gerade auf Firefox (Mac) getestet.

UPDATE

Normalerweise, wenn so etwas passiert, wenn IE/FF, dann hat es mit dem Box-Modell Bug zu tun. Fügen Sie einfach

-webkit-box-sizing: border-box; /* content-box */ 
-moz-box-sizing: border-box; 
box-sizing: border-box; 

auf Ihre Wrap-Klasse und Sie werden nicht den Überlauf einstellen müssen.

0

Nicht sicher, ob dies die eleganteste Lösung ist, aber ich habe gerade overflow-x: hidden; zu meinem Container und es scheint das Problem in IE und FF behoben zu haben. Ich frage mich, warum es benötigt wurde, wenn Chrome ohne es in Ordnung war.

Noch würde ich jede Erklärung schätzen, da ich den Grund nicht kenne, warum meine Lösung arbeitete, danke.

+1

Das Problem ist in der Wrap-Klasse. Box-Sizing hinzufügen: border-box und alles wird gut: '-webkit-box-sizing: border-box; -moz-box-Sizing: Grenzbox; Boxgröße: border-box; ' – Cthulhu

Verwandte Themen