Question

我正在尝试更改HTML页面（包含大量CSS）。有一个“{太宽”的<table>。我不明白为什么它很宽。它的一个子节点必须具有某种width: $A_BIG_NUMBER; css规则，使其变宽，然后将其赋予并使整个事物变宽。

我通常的方法是手动查看所有元素（或我认为负责的元素）以尝试查找此css规则。

有更简单的方法吗？

Answer 1

我遇到了这些“神秘”宽度问题 - 特别是当我试图争论一个开源主题时，我不是大多数代码的作者。

尝试在CSS中添加一些线框。在添加中使用它来使用开发人员Web检查器来查找罪魁祸首（safari，IE，chrome现在都带有开箱即用的开发人员工具，firefox的firefox）。

body { margin: 30px; }
/* Optional: Add some margin to the body to add space and 
see where your offending elements cross the line */

body * { border: 1px solid red; }
/* add a border to all other elements on the page */

body * { outline: 1px solid red; }
/* Alternate: add an outline  to all elements on the page. Won't effect box model */

div#offending-area * { outline: 1px solid red; }
/* If you've got some idea about where the issue is, drill down further than the body tag */

Answer 2

如果您正在使用Chromium，只需右键单击，选择“Check Element”（或其他任何东西，其德语版本中的“Elementüberprüfen”）。之后会打开“检查员”。在那里你可以选择表格标签。在右侧，您将找到包含已识别的CSS语句的列表。文件名。（这有点像Firefox的Firebug，速度要快得多。）

Answer 3

这是一篇很好的文章，用于找出网站中溢出的元素。下面的javascript代码就是为此目的

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

查看此链接， https://css-tricks.com/findingfixing-unintended-body-overflow/

Answer 4

另一种方法是打开调试器/检查器（在Chrome中为Ctrl-Shift-I），然后开始通过Elements标签删除元素。然后注意页面何时“跳转到位”（=不再太宽）。发生这种情况时，您知道您刚刚删除了令人反感的元素：）

找出哪些HTML元素强制页面/块/部分宽/高

4 个答案: