哪個元素導致水平滾動條？自動檢測

網站和HTML應用上的水平滾動條通常對可用性和不需要的都是不利的。發現它們出乎意料地出現是相當常見的，我需要一種快速調試和刪除它們的方法。哪個元素導致水平滾動條？自動檢測

什麼是在您的設計中查找違規HTML元素的最快最簡單的方法？
是否有腳本或工具來自動化？

是的，你可以通過你的頁面刪除/由一個隱藏的元素，直到找出嫌疑人，但是這是耗時的，尤其是如果有多個違規元素。單擊快捷方式或運行腳本並將所有可疑元素高亮顯示，勾勒或打印到控制檯將非常好。

澄清：問題不在於如何解決它，但如何檢測它。我想要一個通用的解決方案，只要出現這個問題就可以工作。

安裝谷歌瀏覽器並使用開發人員工具突出顯示頁面上的任何元素（Windows上的F12）。 – Daniel

這就是我已經使用的方法......我期待着一個帶有JavaScript的自動化解決方案 –

它不會讓我回答一個封閉的問題，但我喜歡解決方案建議[這裏]（http://stackoverflow.com/ a/31458863/195835）：'* {border：1px solid＃f00; }'。在每個元素上都有一個邊框，你可以很容易地看到哪些元素突出得有點過分。 –

在較窄的範圍內，您可以使用jQuery（獲取寬度）和node.scrollWidth來獲取內容超出其邊界的節點。

2013-01-03 20:12:53

是的...我正在尋找類似的東西 –

-1

如果你讓你的內容流，你不會得到放在首位水平滾動條。不要放太多的寬度限制。通常，只設置包含所有內容的主列的（最小）寬度。您也可以限制一些豎條（例如導航條）的寬度。否則，請謹慎使用CSS寬度屬性（以及其他此類機制）。

CSS空白屬性也傾向於需要滾動條;明智地使用這個屬性。這實際上只適用於格式化代碼，因爲它們出現在HTML源代碼中用於對齊的目的，維護換行符非常重要。

2013-01-03 20:17:12 allyourcode

問題不是如何解決它...我的問題是如何檢測它（我已經在編輯這個問題時添加了我的意圖） –

I知道這並不完全回答你的問題，但它可以解決你的問題。你如何解決你的問題的想法是找到水平滾動條並擺脫它們。我的想法是首先不要使用推薦的網絡實踐來創建它們。 – allyourcode

是的，您的意圖是正確的...擺脫真正的問題...但我希望儘量減少識別有問題的組件所需的時間......之後，解決真正問題的解決方案將取決於該組件的開發方式 –

回答