Question

我觉得自己陷入了一个CSS迷宫中。在响应模式下，我注意到我的站点在桌面浏览器（firefox和chromium）中的水平滚动。在android中测试过，似乎没问题。

网站为cv.pixyz.net

为了调试它，我尝试了以下所有方法：

寻找比父母空间更大的元素。
我认为带有#id的容器是问题，因为Web开发人员工具栏显示更接近屏幕边缘，但删除它，没有解决这个问题
用它来查看是否有任何超出范围。一些元素脱颖而出，但仍然无法解决滚动
我尝试了这2个片段：

// 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;
}

有没有人知道是什么导致这种情况，或者有任何其他想法进行调试？

Answer 1

问题似乎如下：

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

URL没有中断空格，因此一旦窗口达到URL字符串的宽度，它就不能包装字符串，因此会添加滚动条。

您拥有的选项是：

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

Answer 2

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

调试令人讨厌的水平滚动

2 个答案: