Jak mogę zapobiec nakładaniu się zawartości paska przewijania w IE10?

W IE10 pasek przewijania nie zawsze istnieje... a kiedy się pojawi, pojawia się jako nakładka... Jest to fajna funkcja, ale chciałbym ją wyłączyć dla mojej konkretnej strony internetowej, ponieważ jest to aplikacja pełnoekranowa, a moje logo i menu są za nią utracone.

IE10:

Tutaj wpisz opis obrazka

CHROME:

Tutaj wpisz opis obrazka

Ktoś zna sposób na stałe ustawianie paska przewijania na IE10?

Overflow-y: scroll nie wydaje się praca! to po prostu umieszcza go na stałe na mojej stronie internetowej.

Może to bootstrap powoduje problem, ale której części nie mam pojęcia! zobacz przykład tutaj: http://twitter.github.io/bootstrap/

Author: isherwood, 2013-06-11
Source

6 answers

Po wygooglowaniu trochę natknąłem się na dyskusję, w której komentarz pozostawiony przez "niebieski atrament"stwierdza:

Przeglądając strony, udało mi się je odtworzyć używając:

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

Co powoduje, że paski przewijania stają się przezroczyste. Ma sens, ponieważ zawartość zajmuje teraz cały ekran.

W tym scenariuszu, dodając:

Overflow - y: auto;

Tworzy paski przewijania auto-hide

I w bootstraps responsive-utilities.less file, linia 21 znajdziesz następujący kod CSS 

// 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;
}
Ten fragment jest przyczyną tego zachowania. Polecam przeczytać linki wymienione w komentowanym kodzie powyżej. (Zostały one dodane po tym jak początkowo zamieściłem tą odpowiedź.)
 163
Author: xec,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-21 15:46:14

Jak xec wspomniał w swojej odpowiedzi, to zachowanie jest spowodowane ustawieniem @ - ms-viewport.

Dobrą wiadomością jest to, że nie musisz usuwać tego ustawienia, aby odzyskać paski przewijania (w naszym przypadku polegamy na ustawieniu @-ms-viewport dla responsive web design).

Możesz użyć stylu-ms-overflow, aby zdefiniować zachowanie przepełnienia, jak wspomniano w tym artykule:

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

Ustaw styl na scrollbar, aby odzyskać paski przewijania: 

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

Scrollbar

Wskazuje, że element wyświetla klasyczny scrollbar-type kontroluj, kiedy jego zawartość przepełnia się. Unforgiven-ms-autohiding-scrollbar, scrollbars na elementach z właściwością-ms-overflow-style ustawioną na pasek przewijania zawsze pojawia się na ekranie i nie wygasa, gdy element jest nieaktywny. Paski przewijania nie nakładają się na zawartość, a zatem zajmuj dodatkowe miejsce w układzie wzdłuż krawędzi element, w którym pojawiaj się.

 180
Author: stefan.s,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-20 07:18:42

Rozwiązanie: dwa kroki-Wykryj, czy IE10, następnie użyj CSS:

Zrób to na 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

Dodaj ten CSS: 

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

Dlaczego to działa:

  • overflow-y:scroll na stałe włącza pionowy pasek przewijania znacznika <body>.
  • -ms-overflow-style:scrollbar wyłącza zachowanie automatycznego ukrywania, przesuwając zawartość i dając nam zachowanie scrollbar, do którego wszyscy jesteśmy przyzwyczajeni.

Aktualizacja dla użytkowników pytających o IE11. - Referencja https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs. 85)

 12
Author: gdibble,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-11-02 19:34:01

Spróbuj tego 

body{-ms-overflow-style: scrollbar !important;}
 4
Author: user2606817,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-23 13:00:48

Ten problem dotyczy również Datatables na Bootstrap 4. Rozwiązanie Mi było:

  1. sprawdzono, czy przeglądarka ie się otwiera.
  2. zastąpiła klasę table-responsive dla klasy table-responsive-ie.

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');
        }
 0
Author: Primoshenko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-18 12:58:31

Próbowałem @-ms-viewport i innych sugestii, ale żaden nie działał w moim przypadku z IE11 na Windows 7. Nie miałem pasków przewijania, a inne posty tutaj co najwyżej dawały mi pasek przewijania, który nigdzie nie przewijał, mimo że było mnóstwo treści. Znaleziono ten artykuł http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie / które zmniejszyły się do . . .

body { overflow-x: visible; }

. . . i zrobił sztuczkę dla mnie.

 -4
Author: Toadmyster,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-23 22:54:01