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

Question

我正在尝试更改HTML页面(包含大量CSS).有一个<table>"太宽"了.我不明白为什么它很宽.它的一个子节点必须具有某种width: $A_BIG_NUMBER;css规则,使其变宽,然后将其提升并使整个事物变宽.

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

有没有更简单的方法？

Answer 1

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

尝试在CSS中添加一些线框.除了使用开发人员Web检查员找到罪魁祸首之外,还可以使用它(safari,IE,chrome现在都带有开箱即用的开发人员工具,firefox的firebug).

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，只需右键单击，选择“检查元素”（或者在德语版本中选择“Element \xc3\xbcberpr\xc3\xbcfen”）。然后“检查员”打开。您可以在那里选择表格标签。在右侧，您将找到一个包含已识别 CSS 语句的列表，其中包括。文件名。（这有点像 Firefox 的 Firebug，只是速度更快。）

\n