Question

我是（现代）网络开发的新手。无论如何，我下载了一个图像旋转器和一个使用jquery的下拉菜单。现在，我把它们放在一起，它们工作正常。但是通过这个下拉菜单，我有一个水平切片的图片而不是垂直的选择列表。

如果我只是放置图像A，B，C - 无论出于什么原因它将它们垂直放置而不是从左到右。所以，我试着将它们放在一张小桌子里 - 它会在图片之间产生一个小间隙，而不是让它们从左到右无间隙 - 即使我说border = 0。

我该如何调试？

Answer 1

下载firebug，或尝试使用google chrome web调试器（ ctrl + shift + J ）

Fire bug可能对您更好，因为它允许您编辑网页并查看某些css调用将如何影响该页面。这是我一直用的东西

还有一个下载（生成链接），允许您在其他浏览器中运行firebug

修改

Firebug lite (For Google Chrome)
Firebug (For Firefox)

Answer 2

尝试Firefox的Firebug插件。您可以使用它来确定哪些规则适用于您的dom元素，只需点击/点击..

您还可以动态编辑CSS并立即查看更改 - 当您移动物品并且不想在每次更改后刷新时都很方便。在Firebug中对CSS进行更改以及何时您感到满意，将它们复制回你的文件。

Answer 3

现代浏览器可让您检查页面元素的确切CSS。您可以使用这些工具进行调试。

在Chrome中，右键单击元素并单击“检查元素”，或单击右上角的扳手图标，转到工具＆gt; “开发人员工具”，然后单击“元素”选项卡以检查元素。
Firefox有FireBug插件，您可以从here下载。
IE有开发人员工具。刚刚点击F12。
我不确定Safari有什么，但它可能类似。

Answer 4

我建议使用Firefox的“Web Developer Toolbar”（插件），然后转到CSS-＆gt;查看样式信息。

Answer 5

大多数Web浏览器都内置了Web Inspectors。您可以使用这些浏览器检查页面上的元素并检查，添加或删除样式。通常会出现调试问题，您将尝试删除样式，但有时您也需要添加样式。这是一个例子：如果我有：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hello World</title>

<style>
  #hello { color: white }
</style>
</head>
<body>
  <p id="hello">Hello World</p>
</body>
</html>

#hello不会出现。我可以使用Google Chrome中的Web Inspector来查找： enter image description here

Answer 6

主要的调试工具是使用“！important”规则来强制执行一些规则，这样你就可以解决问题，同时使用Firebug for Firefox等工具和Chrome的检查器，Safari可以帮助你查看计算的css。此外，Firefox的Web Developer Toolbar还有一个丰富的DOM工具，允许您检查实时DOM树

如何“调试”一个css文件

6 个答案: