为什么 Firebug 显示的 CSS 样式与我在 CSS 文件中看到的如此不同？

Question

我正在尝试对网站进行一些 CSS 更改。 当我使用 Firebug 检查元素时，我发现了一个类bordered，例如我需要对其进行一些更改。 Firebug 告诉我这个类在一个名为 Desktop.css 的文件中。这些是 Firebug 为类 bordered 显示的样式规则：

.bordered {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color #d9d9d9 #d9d9d9;
    border-image: none;
    border-radius: 5px;
    border-style: none solid solid;
    border-width: medium 1px 1px;
}

但是当我查看实际的 Desktop.css 文件时，我看到的 bordered 类的样式规则是：

.bordered {
    border: 1px solid #d9d9d9;
    border-top: none;
    border-radius: 5px;
}

我一定是在做傻事！为什么我会在 Firebug 和实际的 CSS 文件中看到这种差异？

Answer 1

Firebug 会将您的 CSS 规则解析为完整形式。

background 属性是一个比较简洁的好例子。

background其实是一种简写方式

background-color
background-image
background-repeat
background-attachment
background-position

所以如果我们写background: #f00;，我们会得到一个红色的背景，而背景的所有其他属性都将设置为默认值。

Firebug 将显示包括默认值在内的完整值，在本例中为：

background: #ff0000 none repeat scroll 0 0;