javascript - CSS 规则有一个空白源(在网络检查器中)

Question

当我检查一个元素并查看“Computed”CSS 选项卡时，我会看到一个属性列表。如果我展开任何一个属性，我会看到类似这样的内容:

这很有意义:下拉列表显示了它们被覆盖的样式，其中最上面的是“赢家”。所有这些样式都有一个指向右侧的链接，该链接将显示定义它们的来源。

让我感到困惑的是，我试图控制一个元素的宽度，但似乎无法找到它被覆盖的位置，是这样的情况:

请注意，我认为应该是“赢家”的顶部样式未被删除，但属性的值却大不相同，并且没有列出任何来源来解释这种差异。这个覆盖来自哪里？

我已经尝试重新排序我的样式表，直接在 HTML 元素上设置样式，在相关的 CSS 选择器中使用 !important，尽可能具体地重新指定我的选择器，但我仍然可以t 掌握此表的宽度属性。

我已经投入了数小时的时间，因此非常感谢您的帮助。

我使用的是 Firefox，这个问题同时出现在 Firebug 和 Firefox 网络检查器中。

相关表格截图:

Answer 1

它可能不会被覆盖，但会被迫在内容方面有所不同。我看到您正在检查表格的 th 单元格，它会拉伸(stretch)以容纳其列中的内容，即使它的宽度是在 css 中定义的。

<table>
  <tr>
    <th>30</th>
    <th>30</th>
    <th>30</th>
  </tr>
  <tr>
    <td>30</td>
    <td>More_than_30!</td>
    <td>30</td>
  </tr>
</table>

/* CSS */
th {width:30px; background:#CCC;}
td {width:30px; border:1px solid #CCC;}

这里，即使第 th 和 td 单元格被赋予了 width:30px;，中心行单元格的计算宽度也会很大由于数据的拉伸(stretch)以容纳长的、不间断的值，所以更大。在这种情况下，没有覆盖 30px 的 CSS 规则。

请参阅此 fiddle :http://jsfiddle.net/rgthree/kYAG7/