用于区分两个CSS元素的工具

Question

我有两个显示略有不同的div，我查看了每个CSS属性并且它们看起来是一样的，但是我想知道我是否忽略了某些东西。

是否有一个工具可以基本上区分两个不同元素的CSS？

最好集成到浏览器中。

修改

我使用了Chrome的内置开发工具，并通过计算样式区域并手动比较每个属性（IE div.A font-weight：normal; div.B font-weight：normal etc ...）

我正在寻找一种基本上都是“选择元素A和B”的工具，然后拍出一系列差异。像Winmerge比较或类似的东西。

Answer 1

类似的问题被问到here，因此，我创建了一个比较Chrome中两个元素的脚本（您将在链接的答案中找到它）。此外，根据上述脚本，我创建了一个方便的Chrome DevTools Extension "CSS Diff"。

Answer 2

我认为Firediff就是你想要的。虽然它不会比较两个元素，但它会记录DOM更改，因此您可以比较这些日志以查看发生了什么。

此外，您可以在Firebug中使用计算样式，并将每个div的计算样式复制/粘贴到不同的记事本文件中，然后使用文件比较工具比较这些文件。 BeyondCompare非常酷。

Answer 3

div标签有时表现不同，具有相同的属性。原因是您的其他代码可能会影响它。在Firefox中，您可以使用firebug。在我的意见中，重要的是你需要检查影响他们行为的div周围的代码。

Answer 4

我正在为Google Chrome使用Code Cola扩展程序。非常好的和强大的工具。推荐给所有人。

Answer 5

超越比较是比较css或任何类型文件的工具

Answer 6

大多数主流浏览器都内置了开发人员工具。例如，在chrome中，您可以右键单击一个元素并选择“inspect element”，它将带您进入面板。在右侧的面板中，您可以看到应用于任何元素的css样式。 Firefox有一个附加组件，你可以称之为firebug，它也是如此。 Opera有一些很好的集成开发工具，可以在突出显示元素时为您提供很好的统治者。 IE是......好吧...... IE也有它们......只是不那么好。