Как я могу предотвратить наложение содержимого полосы прокрутки в IE10?

183

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

IE10:

введите описание изображения здесь

ХРОМ:

введите описание изображения здесь

Кто-нибудь знает способ всегда фиксировать полосу прокрутки в позиции на IE10?

overflow-y: прокрутка не работает! это просто помещает это навсегда по моему веб-сайту.

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

html css scrollbar internet-explorer-11 internet-explorer-10 Jimmyt1988
источник
Мой IE10 не имеет такого поведения, вы запускаете его как приложение «Метро»?
xec
Нет. Я в Windows 8, если это имеет какое-либо значение. То же самое и на моем ноутбуке ... Вы можете не заметить такого поведения полосы прокрутки, потому что другие сайты, такие как stackoverflow, например, нашли способ обойти это ... Я надеюсь, что новая картина помогает различать разницу между тем, что я делаю, а чем нет. хочу
Jimmyt1988
Это как-то связано с заданной шириной страницы?
Альбзи
Настройка ширины страницы будет работать .. увы, мне было интересно, если есть кросс-браузерный способ. Учитывая Firefox, Safari и Chrome не имеют такого поведения. Полагаю, я мог бы использовать специфичный для IE10 doo-raggy ... просто не похоже на самый элегантный ответ.
Jimmyt1988
@JamesT Я тоже на w8, но не могу найти ни одной страницы, которая заставляет IE10 отображать полосу прокрутки как наложение (даже не мою страницу для перехода, www.arngren.net)
xec

Ответы:

163

Немного погуглив, я наткнулся на дискуссию, где в комментарии, оставленном "Blue Ink", говорится:

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

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

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

В этом сценарии добавление:

переполнение-у: авто;

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

А в файле bootstraps responseive-utilities.less, строка 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;
}

Этот фрагмент - то, что вызывает поведение. Я рекомендую прочитать ссылки, перечисленные в комментарии выше. (Они были добавлены после того, как я первоначально отправил этот ответ.)

XEC
источник
74
Вы, сэр, джентльмен и ученый! Я поместил @ -ms-viewport {width: auto! Важный; } в мой файл CSS и прочь проблема пошла: D
Jimmyt1988
4
отличный ответ, я бы порекомендовал другим прочитать статью, на которую ссылается комментарий начальной загрузки: timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design - удаление этого кода из начальной загрузки может нарушить отзывчивость IE10 в Windows 8 metro
tmsimont
@tmsimont Хороший вопрос. Кроме того, они, кажется, изменили комментарий в последнем исходном файле Boostrap (обновил мой ответ новыми комментариями), в котором теперь упоминается использование сценария сниффинга UA, чтобы применить его к « только Windows 8 для Surface / Desktop» - проверьте ссылку на проблему github.com/twbs/bootstrap/issues/10497
xec
1
Мне действительно нравится начальная загрузка, но я бы хотел, чтобы они разделили параметры мультимедиа и области просмотра в другом файле. Я впервые создавал адаптивный веб-сайт, и мне буквально пришлось пойти и удалить кучу вещей из начальной загрузки, чтобы мой сайт функционировал так, как я этого хотел.
Дэвид
9
-ms-overflow-style: полоса прокрутки; кажется более чистым решением (см. второй ответ).
Мануэль Арвед Шмидт
179

Как 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, для которых установлено значение полосы прокрутки, всегда отображаются на экране и не исчезают, когда элемент неактивен. Полосы прокрутки не перекрывают содержимое, и поэтому занимают дополнительное пространство макета по краям элемента, где они появляются.

stefan.s
источник
9
Я добавил это в элемент HTML, то есть, html{-ms-overflow-style: scrollbar;}и это сработало для меня. Будут ли случаи использования, где это было необходимо в другом месте?
nHaskins
7
body{-ms-overflow-style: scrollbar;}работает хорошо для меня .. Спасибо
Манджит Сингх
15
Это должно быть ответом. Принятый снимает адаптацию устройства видового экрана.
mnsth
это добавляет переполнение на х
Моника
1
@ stefan.s это правильный ответ! Должен быть принят
eirenaios
12

РЕШЕНИЕ: два шага - определить, если IE10, а затем использовать CSS:

сделать это на 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

Добавьте этот CSS:

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

Почему это работает:

  • overflow-y:scrollПостоянно включает <body>тег вертикальной прокрутки.
  • В -ms-overflow-style:scrollbarвыключает автоматическое скрытие поведение, тем самым толкая содержимое над и дает нам поведение макета полосы прокрутки мы все привыкли.

Обновлено для пользователей, спрашивающих о IE11. - Ссылка https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

gdibble
источник
14
почему бы вам не просто сделать body {-ms-overflow-style: scrollbar; }?
Скотт Ромак
7
-1 Ваш код не работает на IE11, и он не будет работать на IE12, когда выйдет. Есть лучшие способы сделать специфичные для IE стили.
Джозеф Леннокс
1
@JosephLennox Если бы вы могли добавить ответ, чтобы указать лучший способ выполнения специфичных для IE стилей, я уверен, что и gdibble, и другие, кто придет к этому вопросу, оценят это.
Заметный компилятор
2
@ConspicuousCompiler Префикс "-ms-" уже адекватно делает его только IE.
Джозеф Леннокс
5
Это как ответ @ stefan.s, но с ненужным раздуванием.
Ry-
4

Попробуй это

body{-ms-overflow-style: scrollbar !important;}
user2606817
источник
0

Эта проблема также происходит с Datatables на Bootstrap 4. Mi решение было:

  1. Проверено, открывается ли браузер ie.
  2. Заменен класс, реагирующий на таблицы, на класс, реагирующий на таблицы, т.е.

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');
        }
Primoshenko
источник
-4

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

body { overflow-x: visible; }

, , , и сделал свое дело для меня.

Toadmyster
источник
2
Речь идет не об отсутствующих полосах прокрутки, а о полупрозрачном наложении полос прокрутки, введенном в качестве побочного эффекта при использовании начальной загрузки. Вы также можете попробоватьbody { overflow: auto; }
xec