css - Chrome 中页脚(和正文)下方的空白

Question

当我在 CSS 中添加时:

body {
overflow-x: hidden;
}

出于某种原因，我在页脚下方有很大的空白，但只是在 Chrome 中。我在几个浏览器上进行了测试，一切正常。

这是浏览器错误还是其他问题？

可以看看http://fc-translations.ch

---

更新

我尝试了以下所有给定的建议，但两种解决方案均无效。我正在进一步研究并意识到问题不是由添加 'overflow-x: hidden;' 引起的。在 'body' 元素上(或评论中提到的 'min-width: 960px;')。

发生遗漏是因为几乎每次当您尝试在 Chrome 的检查器 (F12) 中禁用“body”元素的某些内容时，空白都会消失。

我仍然无法弄清楚是什么导致了这个问题。空白甚至不在“body”元素中，但正如我所见，它出现在 Chrome 中的“body”下方。

有什么想法吗？

Answer 1

问题:

问题似乎来自应用于 .la-tekst a 的动画 bounceInUp。

动画执行以下操作:

@-webkit-keyframes bounceInUp {
        0%{opacity:0;-webkit-transform:translateY(2000px)}
        60%{opacity:1;-webkit-transform:translateY(-30px)}
        80%{-webkit-transform:translateY(10px)}
        100%{-webkit-transform:translateY(0)
    }
}

也许这是 inline-block 的副作用(.la-tekst a 设置为 display:inline-block; )，但 anchor 元素同时占据了它的原始空间，以及从 bounceInUp 动画的 0% 开始设置的空间。

解决方案:

将 overflow:hidden 应用于以下任何一项都可以工作

(选择一个选择器)

.page {overflow:hidden;}
.section-content {overflow:hidden;}
.zone-content-wrapper {overflow:hidden;}
.region-content {overflow:hidden;}
.region-content-inner {overflow:hidden;}
.block-block-1 {overflow:hidden;}
.la-tekst {overflow:hidden;}

或

改变 anchor 标签占据的边界区域

.la-tekst a {
    display: inline;
}

或

.la-tekst a {
    display: block;
}

我提供的两个建议将解决这个问题...第一个将隐藏超出其高度或(包括 super 动画 anchor 标记)的子元素。

第二种解决方案会改变 anchor 标签占据的边界区域，使其不再同时占据其动画空间和原始空间。