调试令人讨厌的水平滚动

我想我陷入了一个CSS迷宫。我在桌面浏览器（firefox和chromium）中注意到我的网站上有一个水平滚动条，处于响应模式。在Android测试，似乎没问题。调试令人讨厌的水平滚动

该网站是cv.pixyz.net

调试它，我尝试了所有的以下内容：

寻找获得比母公司的空间较大的元素。
我以为带#id的容器是问题，因为web开发工具栏显示更接近屏幕边缘，但删除，并没有解决这个问题
用这个来看看是否有任何东西超出界限。一些元素脱颖而出，但仍不能解决滚动
我想这两个片段：

// snippet 1 
 
var docWidth = document.documentElement.offsetWidth; 
 

 
[].forEach.call(
 
    document.querySelector('body *'), 
 
    function(el) { 
 
    console.log(el); 
 
    // console.log(el.offsetWidth); 
 
    // console.log(docWidth); 
 
    if (el.offsetWidth > docWidth) { 
 
     console.log(el); 
 
    } 
 
    } 
 
); 
 

 
// snippet 2 
 
var all = document.getElementsByTagName("*"), i = 0, rect; 
 
for (; i < all.length; i++) { 
 
    rect = all[i].getBoundingClientRect(); 
 
    if (rect.right < 0) all[i].style.outline = "1px solid green"; 
 
}

但没有效果之一：注册无日志，无边框改变

开始删除页面中的其他元素。即使这样，我仍然得到滚动：

<!DOCTYPE html> 
 
<!-- domActual = <?php echo $ambiente; ?> --> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
 
    <title>Sobre mim... @ Luis Aguiar</title> 
 
</head> 
 

 
<body> 
 

 
    <nav class="container"> 
 
    <h2 class="nome">Sobre mim.../Luis Aguiar</h2> 
 
    <a class="dominio" href="http://www.cv.pixyz.net">cv.pixyz.net</a> 
 
    <ul> 
 
     <li> 
 
     <a href="#id">ID</a> 
 
     </li> 
 
     <li> 
 
     <a href="#dev">Dev</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
    <footer> 
 
    <p>Todos os direitos reservados @ Luis Aguiar</p> 
 
    </footer> 
 
</body> 
 

 
</html>

我也试过这种检查异常宽度：（http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/）：

* { 
 
    outline: 1px solid blue!important; 
 
    opacity: 1 !important; 
 
    visibility: visible !important; 
 
}

有谁知道是什么原因导致这种情况，或者有任何其他的想法来调试？

来源

2017-09-24 Luis Aguiar

的问题似乎是以下行：

<section id="dev"> 
    [...] 
    <li class="job"> /* 2nd li element */ 
     [...] 
     <p class="url">https://www.demarca.eu/</p> /* <- This line */

的URL没有中断空格，所以一旦窗口到达的URL字符串的宽度不能包住字符串，因此得到滚动条添加。

你的选项是：

缩短文本：
考虑是否需要显示完整的URL包括https:// - 也许不是把它作为一个链接？例如：
<p class="url"><a href="https://www.demarca.eu/">www.demarca.eu</a></p>
使用小写：CSS将文本更改为大写，这会增加字符串的宽度。
包装URL：强制字符串换行通常是最好的选择，但它不适合url，因为url不能有空格。但是，如果你想让它包住，您可以创建以下CSS类，并把它添加到元素：
.wrap { word-wrap: break-word; }

来源

2017-09-24 04:30:13 FluffyKitten

我真的不知道这是什么，但重新启动后，是确定（...但我清理缓存！）。即使没有CSS和准系统HTML，情况依然存在。在此之后，我做了你所说的，以防万一（因为它看起来更好！）。感谢您的支持！

来源

2017-09-24 05:02:30

调试令人讨厌的水平滚动

回答

相关问题