調試令人討厭的水平滾動

我想我陷入了一個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

調試令人討厭的水平滾動

回答

相關問題