CSS元素溢出问题
Le Wed 12 February 2025
页面中某个元素溢出时，会导致页面布局不协调。
这样的元素被称为ghost CSS elements。
body, html {
overflow-x: hidden;
}
上述方案并不能解决实际问题。
使用了这样的样式，如果浏览器调整了窗口大小，会导致页面无法滚动显示。
所以需要找出导致页面溢出的真正元素，并给它合理的样式。
下述代码可以展示所有元素的渲染情况。
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
可以人工查看溢出的元素。
javascript:(function(){document.body.innerHTML+="<style>*{background: #000%20!important;color:%20#0f0%20!important;outline:%20solid%20#f00%201px%20!important;}%3C/style%3E%22;})();
本次学习的参考资料：
- https://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/