确定 CSS 问题根源的最佳方法是什么答案

【问题标题】：What is the best way to determine the source of a CSS issue确定 CSS 问题根源的最佳方法是什么
【发布时间】：2008-10-28 23:01:56
【问题描述】：

我一直在制作网页。这是我第一次真正尝试使用图像进行设计，然后使用适当的 CSS 布局而不是表格。

http://www.roccocammisola.com/proj/brunel/bgimage.html

我一直遇到主要内容区域两侧的阴影问题。当然这些只是IE中的一个问题。如您所见，阴影已被削减到其实际高度的 10% 左右。

由于我相对缺乏经验，我该如何寻找解决此问题的相关方法。

非常感谢任何帮助。

【问题讨论】：

标签： css internet-explorer styling

【解决方案1】：

FireBug，除其他外，调试 CSS 的最重要工具。

get it here

【讨论】：

既然他说他的问题只在于IE，这对他有什么帮助？
因为从外观上看，这在 FF 中也是个问题。
不，IE7 正确显示它，FF 也是如此。 IE6 是罪魁祸首。
无论问题出在 IE 还是 FF 中……您仍然可以使用 FireBug 来了解您的 CSS 被解释的方式。
很公平。它在 chrome 中看起来也很有趣。但很高兴能得到纠正，而不是认为这是一个更普遍的错误。

【解决方案2】：

IE Web Developer Toolbar 它不如一般的 firebug 好，但当您遇到特定于 IE 的问题时，它会有所帮助。

【讨论】：

【解决方案3】：

除了Firebug，确保您的 HTML 有效是一个非常宝贵的工具，可以最大程度地减少 CSS 问题。有时您的 CSS 可能无法正常工作，因为 HTML 中存在错误。不同的浏览器有不同的方式来处理不正确编写的 HTML，这有时会使它看起来像是存在跨浏览器的 CSS 问题。验证器可以帮助您发现标记中的错误。

http://validator.w3.org/

【讨论】：

【解决方案4】：

+1 为 FireBug

在这种特殊情况下，我只想为您的阴影建议一种新方法。目前，您将它们作为项目。您通常希望将 CSS 背景图像用于此类事情。

.mainShadowRight {
*/ your other stuff */
url('images/mainShadowRight.gif');
}

【讨论】：

【解决方案5】：

您的 .mainShadowRight CSS 类指定了一个最小高度（IE6 无法理解，IE7 并不总是 100% 正确）

正如 DLarsen 指出的那样，您似乎缺少背景图像：url();位。

【讨论】：

【解决方案6】：

感谢您的所有回答，似乎已经成功了。

我想我对上传感到震惊，因为我应该定义在那里有 bg-image 的东西。

IE 网页开发工具栏看起来也不错，因为我有 FF 的 firebug 和网页开发工具栏。

【讨论】：

【解决方案7】：

调试 CSS 的另一个热门推荐 - CSS Viewer。

这是一个 Firefox 插件，可让您将鼠标悬停在网页中的元素上并查看它们的确切样式。通常你会发现最终的样式不是你想要的，可能是由于一些样式继承。

【讨论】：