Question

我正在撕掉我的头发。人们使用什么工具来调试css的格式问题？我有一些相对简单的使用css导航的格式，如下所示：

/* sub navigation */
.sidenav {
    float: right;
    width: 218px;
}
.sidenav h1 {
    background: #BCB39F url(img/sidenavh1.gif) repeat-x;
    border-bottom: 1px solid #999;
    border-top: 1px solid #CCC;
    color: #4A4A44;
    font-size: 1.2em;
    height: 22px;
    margin: 0;
    padding-left: 12px;
}
.sidenav h1 a {
    color: #554;
    text-decoration: none;
    display: block;
}
.sidenav h1 a:hover {
    background: #D6CCB9;

    color: #654;
}

然后我在我的页面中有了这段代码：

<div class="sidenav">
<a href="ceremony">Wedding Ceremony</a> 
<a href="reception">Wedding Reception</a> 
<div class="clearer"></div>
</div>

它没有拿起风格。它工作得很好，所以我在其他地方做出的改变之一肯定会让某些东西不合适（我怀疑某个地方，但我真的很难找到它的位置。我页面的其余部分格式很好......）

有什么建议吗？

感谢firebug发现答案。

格式化未应用，因为链接的格式化仅应用于<h1>元素中的链接 - 即html应该是：

<div class="sidenav">
<h1><a href="ceremony">Wedding Ceremony</a></h1>
<h1><a href=reception">Wedding Reception</a></h1>
<div class="clearer"></div>
</div>

Answer 1

firebug。还有一个在IE中工作的纯JavaScript版本，名为firebug lite。

它允许您动态关闭或更改任何您想要的CSS。

Answer 2

要回答实际问题标题：我使用FireBug！

Answer 3

Web Developer扩展程序也有一些不错的功能。

Answer 4

Firefox的Firebug plugin有一些不错的CSS调试工具。

Answer 5

Firebug真的是你的朋友！

右键单击页面的一部分，选择“Inspect element”，它将告诉您应用于该元素的所有样式。被取代的人被划掉，所以你可以确切地看到你出错的地方。

Answer 6

如果您无法访问Firebug，也可以使用W3C CSS validator。这通常可以指出语法错误。

Answer 7

Magilla Gorilla怀疑缺乏“：

<a href=reception">Wedding Reception</a>

Answer 8

在这种情况下，

firebug是救星！

调试css有哪些工具？

9 个答案: