Проблема со странным краем на IE11 - переполнение и гладкая прокрутка могут быть связаны

Question

У меня крошечная проблема с веб-сайтом plenarto.github.io, который меня несколько раз задевает.

Странный белый запас появляется в правой части веб-сайта, когда вы открываете его с помощью IE11. Он проходит через веб-сайт, снизу вверх. Вы не можете ориентировать его с помощью инструментов разработчика, ни добавить любую границу к нему:

* { 
border: solid red 1px; 
} 

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

Добавление переполнения-x: скрытое к html и телу решает эту проблему, но затем возникает проблема с вертикальной прокруткой (я полагаю, это может быть связано с плавным прокруткой). Когда переполнение-x: скрыто добавлено, в IE веб-сайт нельзя прокручивать с помощью колеса мыши вообще, а в Chrome все внутренние ссылки перестают работать.

Я пытался найти какое-либо решение для этого для довольно время ...

Кто-нибудь знает, что может быть причиной этого странного края и как избавиться от него без использования переполнения-х : скрыто?

Заранее благодарим за ваше время!

Answer 1

Ваша проблема лежит где-то в #projects .main-container. Если вы добавите overflow: hidden в эту проблему, проблема исчезнет. Вероятно, маржа одного из объектов проекта переполнена.

Answer 2

Проблема заключается в элементах в разделе «Проекты». В частности, класс project-container. Весь стиль не выполняется должным образом.

Попробуйте с этим:

.project-container { 
    display: inline-block; 
    width: 33%; 
    padding: 20px; 
    box-sizing: border-box; 
} 

Если вы хотите, чтобы тень назад только стилизации в img внутри div, а не для самого div. Также вам может потребоваться настроить ширину для медиа-запросов.

При добавлении прокладки, поля, границы или тени к элементу с фиксированной шириной он увеличивает размер за пределами контейнера, это можно обойти, добавив дисплей: inline-block и box-sizing: border-box.