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

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

Я не могу точно определить, что вызывает его. Иногда страница содержит 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 line-height

Проверьте этот снимок экрана, если вы все еще не видите, о чем они говорят:

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

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

Ответ 1

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

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

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

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

Ответ 4

Другим способом было бы применить: после контента к вашему телу только для 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");
        }
    });
}