调整浏览器屏幕大小后，CSS水平滚动条显示在chrome中

Question

亲爱的堆栈溢出用户，

我正在努力开发一个快速响应的网站。

我在Google Chrome和默认的Android互联网浏览器上遇到了一个非常奇怪的问题。

在网站调整大小后显示（使浏览器水平放大或在Android上更改纵向视图（超过480像素））。

当我将浏览器的大小调整为小于480像素时，水平滚动条会出现。

亲自见（loco para saxo .com / new）

Answer 1

问题出在你的CSS上。对于navigation您要写visibility: hidden;而不是display:none。

.moduletable_shop h3, #navigatie-horizontaal, .logo {
position: absolute;
width: 0;
height: 0;
display: none;
}

写display:none;的原因是因为visibility: hidden;隐藏了该元素但未移除该元素，但display:none删除该元素。

Answer 2

肮脏的方式，但它的确有效。

body {
    overflow-x: hidden;
}

Answer 3

正如sandeep所写的，它发生的原因是你使用visibility: hidden。如果您想隐藏内容，则应使用display:none代替。根据w3schools-docs，visibility: hidden是：

该元素不可见（但仍然占用空间）