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

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:

CHROM:

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/

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.)

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.

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)

Versuche dies

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

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');
        }  

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.