IE9 отображает белую линию внизу страницы - PullRequest
Новая
       30

IE9 отображает белую линию внизу страницы

10 голосов
/ 07 октября 2011

Недавно я заметил на нескольких веб-страницах, и на некоторых из моих собственных, что когда они отображаются в Internet Explorer 9, когда он не находится в режиме Quirks, он отображает белую линию, около 1 пикселя, в нижней части страницы. Это похоже на тег html с padding-bottom: 1px и обернут в другой элемент с белым фоном (но это не так, и у него нет отступов). Похоже, различия между стандартами IE9 и режимом причуд показывают при определении ширины элемента обтекания, но по вертикали. Также создается впечатление, что содержимое элемента выдвигается на 1 пиксель предыдущим элементом, как и его содержимое, но не поля или границы перекрывают размеры следующего элемента.

Я не могу точно определить, что вызывает это. Иногда страница содержит 2 таблицы, и все в порядке. Затем вам нужно добавить третий, и появится строка. Даже не должно быть таблиц между прочим.

Иногда, сброс CSS решает проблему. Устанавливаем ту же высоту строки, что и в теле, для ссылок: 

body {
    line-height: 1
}
a, links, visited {
    line-height: 1
}

исправляет это, но не всегда. Единственное, что я могу сделать, это проверять элемент за элементом, отключать / включать их правила CSS, пока они не исчезнут.

Я заметил, что когда есть такие элементы, как таблицы, входные данные, текстовые области, эта проблема более вероятна. «Сбрасывая» их атрибуты, иногда тоже решает.

Я знаю, что было бы проще предоставить код в качестве примера, но, как я уже сказал, я не могу определить шаблон для него. Я могу привести несколько примеров сайтов / URL-адресов. Я замечаю эту ошибку (вы должны взглянуть на самый низ страницы и увидеть разницу между IE и другим браузером, например Firefox):

casinosdelmundo.info, gatosabido.com.br, espanol.yahoo.com, en.wikipedia.org/wiki/Bruce_Beutler, ea.com/command-and-conquer-4, facebook.com (те, что с белым, или почти белый bg, измените фон тела с помощью f12, инструмента разработчика, и вы увидите). Я нашел пример даже здесь, в stackoverflow (как и сегодня, главная страница stackoverflow.com также показывает эту строку, но она может измениться, поскольку иногда проблема возникает или исчезает, когда появляются новые элементы или удаляются):

этот вопрос имеет белую линию: Сделать ссылку в ячейке таблицы на всю высоту строки

этот не имеет: Высота линии FireFox 3

Проверьте этот скриншот, если вы все еще не поняли, о чем я: enter image description here

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

Итак, кто-нибудь сталкивался с такой же проблемой и нашел лучшее решение?

Ответы [ 4 ]

1 голос
/ 17 октября 2011

Я не уверен, потому что здесь нет HTML, но он очень похож на стандартное поведение браузера, когда отображает встроенный контент.Это связано с тем, что при отображении текста браузеру необходимо оставлять некоторое место внизу для букв и символов, таких как: ",", "y", "p" и т. Д., Поскольку в этих буквах естьчасть, которая выступает вниз.Вы можете лучше понять, о чем я говорю, когда посмотрите на эту картинку: пример того, как отображается встроенный контент

, поэтому, если у вас есть какая-то разметка, например 

<body>
    <div></div>
    <textarea></textarea>
</body>

вы получите это дополнительное место внизу.Чтобы избавиться от него, вы должны использовать там либо блок-элемент, либо установить для встроенного элемента стиль css 'display: block'

0 голосов
/ 24 мая 2017

Другим способом было бы применить: after content к вашему телу только для IE и Edge. Таким образом вы избавитесь от лишней белой линии. Нам также может потребоваться некоторый jQuery, чтобы содержимое применялось только тогда, когда вы находитесь внизу страницы. 

body{
    position:relative;
    width:100%;
}
body:after{
    content: "";
    display:block;
    background-color: #000;
    height: 1px;
    bottom: 0px;
    position: fixed;
    width: 100%;
}

JQuery 

//add a border to internet explorer
if (bowser.name == "Microsoft Edge" || bowser.name == "Internet Explorer") {
    //console.log(" iam inside");
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $("body").addClass("end-border");
        }
        else {
            $("body").removeClass("end-border");
        }
    });
}
0 голосов
/ 20 апреля 2012

Это происходит при использовании дробных размеров шрифта.

Например, stackoverflow использует h2 {font-size: 140%;} body { font-size:80%;}, что приводит к общему размеру шрифта 112% для h2. Примените это к размеру по умолчанию 16px, и вы получите 17.93px (включая ошибки округления , ура!)

Попробуйте сами: getComputedStyle(document.querySelector('h2')).fontSize

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

Кстати, у Firefox тоже есть проблемы. Расстояние между строками нижнего колонтитула отключено на пиксель.

Исправление очевидно: используйте целочисленные пиксели для объявления font-size s.

0 голосов
/ 20 апреля 2012

Я нашел решение проблемы, если оно идиотское: установите переключатель Maximize / Restore окна браузера в значение Maximize (= текст подсказки; это указывает на то, что окно находится в немаксимальном состоянии).Сделайте окно браузера на самом деле меньше экрана.Нажмите F11 в этом состоянии, и в нижней части экрана нет белой линии (Win7 x32 и x64).(Кстати, доза FF не имеет этой проблемы и является лучшей альтернативой.)

...