Wie kann ich verhindern, dass die Bildlaufleiste Inhalte in IE10 überlagert?

183

In IE10 ist die Bildlaufleiste nicht immer vorhanden ... und wenn sie angezeigt wird, wird sie als Overlay angezeigt ... Es ist eine coole Funktion, aber ich möchte sie für meine spezifische Website deaktivieren, da es sich um eine Vollbildanwendung und meine handelt Logos und Menüs gehen dahinter verloren.

IE10:

Geben Sie hier die Bildbeschreibung ein

CHROM:

Geben Sie hier die Bildbeschreibung ein

Kennt jemand eine Möglichkeit, die Bildlaufleiste auf IE10 immer in Position zu halten?

overflow-y: scroll scheint nicht zu funktionieren! es setzt es einfach permanent über meine Website.

Es kann Bootstrap sein, das das Problem verursacht, aber welchen Teil ich keine Ahnung habe! siehe Beispiel hier: http://twitter.github.io/bootstrap/

Jimmyt1988
quelle
Mein IE10 hat dieses Verhalten nicht. Führen Sie es als "Metro" -App aus?
xec
Nein, bin ich nicht. Ich bin in Windows 8, wenn das einen Unterschied macht. Dies gilt auch für meinen Laptop. Möglicherweise bemerken Sie dieses Verhalten in der Bildlaufleiste nicht, da andere Websites wie beispielsweise Stackoverflow einen Weg gefunden haben, um es zu umgehen. Ich hoffe, das neue Bild hilft dabei, den Unterschied zwischen dem, was ich tue und dem, was ich nicht tue, zu erkennen wollen
Jimmyt1988
Hat das etwas mit einer festgelegten Seitenbreite zu tun?
Albzi
Das Einstellen der Seitenbreite würde funktionieren. Leider habe ich mich gefragt, ob es einen browserübergreifenden Weg gibt. In Anbetracht von Firefox haben Safari und Chrome dieses Verhalten nicht. Ich könnte ein IE10-spezifisches Doo-Raggy verwenden, denke ich. Es scheint einfach nicht die eleganteste Antwort zu sein.
Jimmyt1988
@ JamesT Ich bin auch auf w8, kann aber keine Seite finden, auf der IE10 die Bildlaufleiste als Overlay rendert (nicht einmal meine Go-to-Test-Seite, www.arngren.net)
xec

Antworten:

163

Nachdem ich ein bisschen gegoogelt hatte, stieß ich auf eine Diskussion, in der ein Kommentar von "Blue Ink" besagt:

Als ich die Seiten inspizierte, gelang es mir, sie zu reproduzieren, indem ich Folgendes verwendete:

@ -ms-viewport {width: Gerätebreite; }}

Dadurch werden die Bildlaufleisten transparent. Sinnvoll, da der Inhalt nun den gesamten Bildschirm einnimmt.

In diesem Szenario wird Folgendes hinzugefügt:

Überlauf-y: auto;

Lässt die Bildlaufleisten automatisch ausblenden

In der Datei responsive-utilities.less von bootstraps, Zeile 21 , finden Sie den folgenden CSS-Code

// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport {
  width: device-width;
}

Dieses Snippet verursacht das Verhalten. Ich empfehle, die im kommentierten Code oben aufgeführten Links zu lesen. (Sie wurden hinzugefügt, nachdem ich diese Antwort ursprünglich gepostet habe.)

xec
quelle
74
Sie, mein Herr, sind ein Gentleman und ein Gelehrter! Ich habe @ -ms-viewport platziert {width: auto! Important; } in meine CSS-Datei und weg ging das Problem: D
Jimmyt1988
4
Tolle Antwort, ich würde anderen empfehlen, den Artikel zu lesen, auf den im Kommentar von bootstrap verwiesen wird : timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design - das Entfernen dieses Codes aus dem Bootstrap kann die Reaktionsfähigkeit von IE10 beeinträchtigen Windows 8 Metro
tmsimont
@ tmsimont Guter Punkt. Außerdem scheinen sie den Kommentar in der neuesten Boostrap-Quelldatei geändert zu haben (meine Antwort wurde mit den neuen Kommentaren aktualisiert), in der nun die Verwendung eines UA-Sniffing-Skripts erwähnt wird, um dies auf " nur das Surface / Desktop Windows 8" anzuwenden - überprüfen aus dem Problem Link github.com/twbs/bootstrap/issues/10497
xec
1
Ich mag Bootstrap wirklich, aber ich wünschte, sie würden die Medien- und Ansichtsfensteroptionen in einer anderen Datei trennen. Ich habe zum ersten Mal eine reaktionsfähige Website erstellt und musste buchstäblich eine Menge Dinge aus dem Bootstrap entfernen, damit meine Website so funktioniert, wie ich es wollte.
David
9
-ms-overflow-style: Bildlaufleiste; scheint die sauberere Lösung zu sein (siehe zweite Antwort).
Manuel Arwed Schmidt
179

Wie xec in seiner Antwort erwähnt hat, wird dieses Verhalten durch die Einstellung @ -ms-viewport verursacht.

Die gute Nachricht ist, dass Sie diese Einstellung nicht entfernen müssen, um die Bildlaufleisten wiederherzustellen (in unserem Fall verwenden wir die Einstellung @ -ms-Ansichtsfenster für reaktionsschnelles Webdesign).

Sie können den -ms-overflow-Stil verwenden, um das Überlaufverhalten zu definieren, wie in diesem Artikel erwähnt:

http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx

Stellen Sie den Stil auf Bildlaufleiste ein, um die Bildlaufleisten wiederherzustellen:

body {
    -ms-overflow-style: scrollbar;
}

Scrollleiste

Gibt an, dass das Element ein klassisches Steuerelement vom Typ Bildlaufleiste anzeigt, wenn sein Inhalt überläuft. Im Gegensatz zu -ms-autohiding-scrollbar werden Bildlaufleisten für Elemente mit der Eigenschaft -ms-overflow-style auf scrollbar immer auf dem Bildschirm angezeigt und nicht ausgeblendet, wenn das Element inaktiv ist. Bildlaufleisten überlagern den Inhalt nicht und belegen daher zusätzlichen Layoutbereich entlang der Kanten des Elements, an dem sie angezeigt werden.

stefan.s
quelle
9
Ich habe dies auf dem HTML-Element hinzugefügt, dh html{-ms-overflow-style: scrollbar;}es hat bei mir funktioniert. Würde es Anwendungsfälle geben, in denen dies anderswo benötigt würde?
nHaskins
7
body{-ms-overflow-style: scrollbar;}funktioniert gut für mich .. Danke
Manjit Singh
15
Dies sollte die Antwort sein. Die akzeptierte Option entfernt die Anpassung des Ansichtsfensters.
mnsth
es fügt Überlauf auf dem x
Monicka
1
@ stefan.s das ist die richtige antwort! Sollte akzeptiert werden
eirenaios
12

LÖSUNG: Zwei Schritte - Erkennen Sie, ob IE10 vorhanden ist, und verwenden Sie dann CSS:

Mach das auf init:

if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE11');
}

// --OR--

$('body').addClass(
  /msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? 'IE11' :
  ''  // Neither
);

// --OR (vanilla JS [best])--

document.body.className +=
  /msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? ' IE11' :
  '';  // Neither

Fügen Sie dieses CSS hinzu:

body.IE10, body.IE11 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

Warum es funktioniert:

  • Das overflow-y:scrollschaltet dauerhaft auf dem <body>Etikett vertikalen Scrollbalken.
  • Das -ms-overflow-style:scrollbar Windungen von der Auto-Verstecken Verhalten, wodurch der Inhalt über Schiebe- und gibt uns die Scrollbar Layout Verhalten , das wir alle verwendet sind.

Aktualisiert für Benutzer, die nach IE11 fragen. - Referenz https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

gdibble
quelle
14
warum machst du nicht einfach body {-ms-overflow-style: scrollbar; }?
Scott Romack
7
-1 Ihr Code funktioniert nicht mit IE11 und nicht mit IE12, wenn er veröffentlicht wird. Es gibt bessere Möglichkeiten, IE-spezifische Stile zu erstellen.
Joseph Lennox
1
@JosephLennox Wenn Sie eine Antwort hinzufügen könnten, um einen besseren Weg für IE-spezifische Stile anzugeben, wären sowohl gdibble als auch andere, die diese Frage beantworten, sicher dankbar.
Auffälliger Compiler
2
@ConspicuousCompiler Das Präfix "-ms-" macht es bereits ausreichend zum IE.
Joseph Lennox
5
Dies ist wie die Antwort von @ stefan.s, aber mit unnötigem Aufblähen.
Ry-
4

Versuche dies

body{-ms-overflow-style: scrollbar !important;}
user2606817
quelle
0

Dieses Problem tritt auch bei Datatables auf Bootstrap 4 auf. Die Mi-Lösung war:

  1. Überprüft, ob sich der Browser öffnet.
  2. Ersetzte tabellenreaktive Klasse für tabellenreaktive Klasse.

CSS:

.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}

JS:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
        {
            $('#tableResponsibleID').removeClass('table-responsive');
            $('#tableResponsibleID').addClass('table-responsive-ie');
        }  
Primoschenko
quelle
-4

Versuchte das @ -ms-Ansichtsfenster und andere Vorschläge, aber keiner funktionierte in meinem Fall mit IE11 unter Windows 7. Ich hatte keine Bildlaufleisten und die anderen Beiträge hier würden mir höchstens eine Bildlaufleiste geben, die nirgendwo scrollte, obwohl es sie gab viel Inhalt. Fand diesen Artikel http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/, der auf reduziert wurde. . .

body { overflow-x: visible; }

. . . und habe den Trick für mich getan.

Toadmyster
quelle
2
Bei der Frage geht es nicht um fehlende Bildlaufleisten, sondern um die halbtransparente Überlagerung von Bildlaufleisten, die als Nebeneffekt bei der Verwendung von Bootstrap eingeführt wird. Sie können auch versuchenbody { overflow: auto; }
xec