Horizontale Bildlaufleisten auf Websites und HTML-Apps sind in der Regel schlecht für die Benutzerfreundlichkeit und unerwünscht. Es ist ziemlich gewöhnlich, dass sie unerwartet auftauchen und ich brauche einen Weg, sie schnell zu debuggen und zu entfernen.
Was ist der schnellste und einfachste Weg, anstößige HTML-Elemente in Ihrem Design zu finden?
Und gibt es ein Skript oder ein Tool, um dies zu automatisieren?
Ja, Sie können durch die Seite gehen, indem Sie einzelne Elemente nacheinander löschen / ausblenden, bis Sie einen Verdächtigen gefunden haben, aber das ist zeitaufwendig, besonders wenn mehrere anstößige Elemente sind. Es wäre toll, auf eine Verknüpfung zu klicken oder ein Skript auszuführen und alle verdächtigen Elemente auf der Konsole zu markieren, zu skizzieren oder auszudrucken.
Zur Klarstellung: Das Problem besteht nicht darin, es zu lösen, sondern wie es erkannt wird. Ich hätte gerne eine allgemeine Lösung, die immer dann funktioniert, wenn dieses Problem auftritt.
In einem engeren Bereich können Sie jQuery (um die Breite zu erhalten) und node.scrollWidth verwenden, um Knoten mit Inhalten zu erhalten, die ihre Grenzen überschreiten.
Wenn Sie Ihren Inhalt fließen lassen, erhalten Sie keine horizontalen Bildlaufleisten an erster Stelle. Legen Sie nicht zu viele Breitenbeschränkungen fest. Normalerweise legen Sie nur die (minimale) Breite der Hauptspalte fest, die Ihren gesamten Inhalt enthält. Sie können auch die Breite einiger vertikaler Balken einschränken (z. B. Navigationsleisten). Ansonsten verwende die CSS-width -Eigenschaft (und andere solche Mechanismen) sparsam.
Die CSS-Leerraumeigenschaft erfordert auch häufig Bildlaufleisten; Verwenden Sie diese Eigenschaft mit Bedacht. Dies ist wirklich nur für das Formatieren von Code, wo es wichtig ist, Zeilenumbrüche beizubehalten, wie sie in der HTML-Quelle für Ausrichtungszwecke erscheinen.
Tags und Links javascript html css scrollbar