Наложение полосы прокрутки в IE10, как это остановить?

Question

Наложение полосы прокрутки в IE10, как это остановить?

в IE10, полоса прокрутки не всегда есть... и когда он появляется, он появляется как наложение... Это классная функция, но я хотел бы отключить ее для моего конкретного веб-сайта, поскольку это полноэкранное приложение, и мои логотипы и меню теряются за ним.

IE10:

enter image description here

CHROME:

enter image description here

кто-нибудь знает способ всегда иметь полосу прокрутки фиксированной в положении on В IE10?

overflow-y: прокрутка, похоже, не работает! он просто помещает его постоянно на мой сайт.

это может быть bootstrap вызывает проблему, но какая часть я понятия не имею! см. пример здесь: http://twitter.github.io/bootstrap/

712 6

html css twitter-bootstrap scrollbar internet-explorer-10

6 ответов:

Comments

Ничего не найдено.

xec · Accepted Answer · 2014-08-19 10:44:26

после погуглив немного, я наткнулся на это; http://channel9.msdn.com/Forums/Coffeehouse/IE10-how-does-the-scrollbar-autohide-on-buildwindowscom-microsoftcom где комментарий, оставленный "синими чернилами", гласит:

просматривая страницы, мне удалось воспроизвести его с помощью:

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

что приводит к тому, что полосы прокрутки становятся прозрачными. Имеет смысл, так как содержание теперь занимает весь экран.

в этом случае, добавив:

overflow-y: auto;

делает полосы прокрутки автоматически скрывать

и bootstraps responsive-утилиты.меньше файла, строка 21 вы можете найти следующий код 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;
}
этот фрагмент является причиной поведения. Я рекомендую прочитать ссылки, перечисленные в комментированном коде выше. (Они были добавлены после того, как я первоначально написал этот ответ.)

stefan.s · Accepted Answer · 2016-04-20 10:18:42

Как упоминал xec в своем ответе, это поведение вызвано настройкой @-ms-viewport.

хорошая новость заключается в том, что вам не нужно удалять этот параметр, чтобы вернуть полосы прокрутки (в нашем случае мы полагаемся на параметр @-ms-viewport для адаптивного веб-дизайна).

вы можете использовать-ms-overflow-style для определения поведения переполнения, как указано в этом статья:

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

установите стиль полосы прокрутки, чтобы вернуть полосы прокрутки:
body {
    -ms-overflow-style: scrollbar;
}
полоса прокрутки

указывает, что элемент отображает классический тип полосы прокрутки контролируйте, когда его содержимое переполняется. В отличие от-ms-autohiding-scrollbar, полосы прокрутки для элементов со значением свойства-ms-overflow-style полоса прокрутки всегда появляется на экране экран и не увядает вне когда элемент неактивен. Полосы прокрутки не накладывают содержимое, и поэтому занимают дополнительного пространства по краям элемента, где они появиться.

gdibble · Accepted Answer · 2014-03-08 03:29:27

устранение: два шага-определить, если IE10, а затем использовать CSS:

сделайте это на init:
if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
}
добавить этот CSS:
body.IE10 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}
почему это работает:

The overflow-y:scroll постоянно включается <body> - тег вертикальная полоса прокрутки.

The -ms-overflow-style:scrollbar отключает автоматическое скрытие поведения, таким образом, толкая содержимое и давая нам поведение макета полосы прокрутки, к которому мы все привыкли.

user2606817 · Accepted Answer · 2015-06-23 16:00:48

попробуй такое
body{-ms-overflow-style: scrollbar !important;}

Primoshenko · Accepted Answer · 2018-09-18 15:58:31

эта проблема также происходит с таблицами данных на Bootstrap 4. Ми решение было:

проверено, открывается ли браузер 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');
        }  

Toadmyster · Accepted Answer · 2015-02-24 00:54:01

попытался @ - ms-viewport и другие предложения, но никто не работал в моем случае с IE11 в Windows 7. У меня не было полос прокрутки, и другие сообщения здесь в лучшем случае дали бы мне полосу прокрутки, которая никуда не прокручивалась, хотя было много контента. Нашел эту статью http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ который сводится к . . .

body { overflow-x: visible; }

. . . и сделал трюк для меня.