有哪些用于调试 CSS 的工具？

Question

有哪些用于调试 CSS 的工具？

8

我对这个问题感到非常困惑。人们用什么工具来调试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>

- Rob Y

9个回答

15

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

- Macka

5

Web Developer 扩展程序也做了一些很不错的事情。

- chaos

3

Firebug插件是Firefox浏览器的一款实用工具，它提供了一些不错的CSS调试工具。

- Alex McBride

3

Firebug真的是你的好朋友!

右键点击页面的某个部分，选择“检查元素”，它将告诉您应用于该元素的所有样式。被取代的样式会被划掉，因此您可以准确地看到您出了什么问题。

- teedyay

3

如果您无法使用Firebug，您还可以使用W3C CSS 验证器。它通常能够指出语法错误。

- Rich Adams

此验证器可通过Web开发者工具栏轻松访问：https://addons.mozilla.org/en-US/firefox/addon/60 - Greg Mattes

2

马吉拉猩猩怀疑缺少“：”。

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

- Magilla Gorilla

谢谢 - 发现得好，但不幸的是那是我在写问题时的Ctrl-V错误（我只发布了一部分更大的内容）。 - Rob Y

1

Firebug在这种情况下是一个救星！

- scooterXL

0

- Phil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mark · Accepted Answer

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

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