IE11 上的奇怪边距问题 - 溢出和平滑滚动可能相关

Question

我在网站 plenarto.github.io 上遇到了一个小问题，困扰了我好几天。

用IE11打开网站时，右侧出现奇怪的白边。它贯穿整个网站，从底部到顶部。您不能使用开发人员工具定位它，也不能使用以下方法为其添加任何边框：

* {
border: solid red 1px;
}

白边会导致网站在底部有额外的水平滚动条。

在 html 和 body 中添加 overflow-x: hidden 解决了这个问题，但随后出现了垂直滚动的问题（我想它可能与平滑滚动有关）。添加 overflow-x: hidden 后，在 IE 上根本无法用鼠标滚轮滚动网站，在 Chrome 上所有内部链接都停止工作。

很长一段时间以来，我一直在努力寻找任何解决方案...

有谁知道这个奇怪的边缘可能是什么原因以及如何在不使用 overflow-x: hidden 的情况下摆脱它？

提前感谢您的宝贵时间！

Answer 1

您的问题出在 #projects .main-container 的某处。如果您将 overflow: hidden 添加到此 div 问题就会消失。可能是其中一个项目的边距溢出了。

Answer 2

问题出在“项目”部分中的元素。特别是 class project-container。整个样式没有正确实现。

试试这个：

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

如果你想要阴影回来，只需在 div 中设置 img 的样式，而不是 div 本身。此外，您可能需要调整媒体查询的宽度。

每当您向具有固定宽度的元素添加填充、边距、边框或阴影时，它都会增加容器外的尺寸，这可以通过添加显示来绕过：inline-block 和 box-sizing: border-box 属性。

Issue with a strange margin on IE11 - overflow and smooth scroll might be related