当页面上的某些元素没有按原样出现时,如何通常调试CSS并解决问题?现在,我必须逐个注释掉CSS声明,以了解样式的显示方式。
答案 0 :(得分:1)
虽然您无法“调试”CSS,因为它不是脚本语言,您可以使用Chrome DevTools Elements面板来检查元素&查看右侧的“样式”窗格。
这将为您提供有关被覆盖或忽略的样式的见解(投掷线)。
CTRL + SHIFT + I
查找错误&警告使用CSSLint
答案 1 :(得分:0)
调试CSS和HTML代码错误确实破坏了您的应用程序设计。有多种方法可以调试CSS和HTML代码调试。在开发HTML或编写CSS时,您应该考虑调试和注意事项或方法。
使用http://csslint.net/检查语法错误。它提供了 漂亮的工具,并突出显示发生错误的行。
仔细检查您的跨浏览器兼容性问题。一个网站在Firefox中看起来很漂亮但有时它不会 在那个时候用另一个浏览器看起来不错,你应该好好照顾 CSS的跨浏览器兼容性问题。你应该好又好 CSS框架将阻止生成跨浏览器问题和 验证可能由浏览器支持的HTML标记和CSS属性 正确。
浏览器Web开发人员工具允许使用概述HTML和元素 不同的标准,这将允许为HTML编写适当的CSS 元件。
使用Chrome开发工具打开或关闭样式表。如果你想知道 你的CSS如何影响特定的页面元素Chrome DevTools可以轻松切换每个属性。在谷歌浏览器中 在Web浏览器中,只需右键单击并从中选择Inspect Element 上下文菜单。在“元素”面板的右侧,您应该看到一个 名为Styles的选项卡,其中包含一些CSS。这显示了你的CSS 声明正在应用于所选元素,如果你 将鼠标悬停在每个CSS属性上,您可以单独取消选中它们。什么时候 一个属性被划掉,通常意味着它正在存在 在其他地方被覆盖。您可能需要取消选中多个属性 实际上从元素中删除它的地方。
在chrome dev工具中使用计算选项卡。它告诉你到底是怎么回事 浏览器正在计算你的风格。在大型项目上工作时 对于解决级联问题,选择器问题至关重要 特异性等等。
您可以使用 ctrl + shirt + I 启用chrome dev工具或按 F12 键 它几乎支持所有浏览器。