2013-10-21 64 views
8

道歉,如果这是一个重复的问题,虽然我已经搜索了一个解决方案,但没有找到一个。有没有办法找出css规则来自哪里?

我已经继承了.asp网站,不得不更新页面以将表格中的表单重新定位到侧边栏。

它的工作很好,但只有一页固执地拒绝接受我的CSS,并从谁知道在哪里取值。

我试过在Firefox/Chrome中调试,甚至在页面头部编写规则,但无济于事。有没有一种识别这种东西的工具?我对css毫不犹豫,但这让我感到困惑。我不想诉诸JavaScript来解决这个问题,因为我认为它是一个基本问题。

的网址是:leads2trade _solar

***现在回答 - 调试工具告诉CSS的故事,但没有标志涨得厉害编码的HTML!感谢所有的帮助。

+3

检查出萤火虫,“用萤火虫检查” – mikey

+0

嗨是表溢出容器的问题吗?如果是这样,这不是关于你的问题。 – DaniP

+0

谢谢你们。 @Danko - 如果不是css,那么问题是什么? – dvmac01

回答

7

您可以在Chrome中使用网络检查器。

右键单击失败的元素并选择检查元素。

您应该以两个部分的Web检查器窗口结束:左是html节点树,右是所选节点的样式和属性。应该选择失败的元素。

接下来,您需要展开“计算样式”选项卡并查找违规样式。

找到后,您会在样式定义的左侧看到一个小三角 - 它是可点击的。点击它应该展开影响这​​个元素的这种风格的选择器列表。你会看到每一个这样的网址。答对了。

+1

谢谢你们。我已经完成了所有这一切,但财产没有三角形在一边。这是我追逐的宽度属性。它有一个style4类,在文件的头部声明,但它应该是100px,它会以218px出现。 – dvmac01

+0

@ user2739763:检查是否应用了大于100px的最大宽度。或者查看Style选项卡,查看宽度是否被另一个宽度规则或HTML元素上定义的width-property覆盖 – Drkawashima

1

在萤火虫的HTML标签,你应该看到与标签StyleComputedLayoutDOM右侧的面板。选择Computed。这会向您显示应用于页面的“当前”样式。

如果展开规则节点,则应该在右侧看到一个链接,显示它来自哪个样式表,以及正在被覆盖的样式表规则。

2

正如指出的奥斯汀和WATERLINK的计算样式(或计算在FF)选项卡可以显示当前应用的样式,以及它们的来源。

但是,样式选项卡也非常有用。右键单击元素上的“检查”后,“样式”选项卡将显示与检查元素相关的所有活动样式和被覆盖样式的完整列表。 (显示它们是在CSS中编写的,而不是实际呈现的内容) 通过这种方式,您可以知道哪些样式以哪种顺序被覆盖。CSS中的样式可以被内联样式,用户定义的样式,后来定义的css文件或更高重要性的css规则覆盖,甚至可以直接在HTML元素上覆盖非css属性,例如width/height属性

格式化显示了样式的状态:通过

  • 正常文本=活性
  • 击=无效,因为另一样式已覆盖它
  • 变灰=标识符不被应用。 (如果正在检查一个<p>元件的方式与该CSS标识符是p, span,则span IDENTIFER将灰色)

实施例:

chrome debugger image

在该图像中,color#post a的财产不活跃。它已被#cashieCatalog中的color属性覆盖。

相关问题