通过Chrome DevTools进行CSS样式调试方法
可以按照评估和快速修复、还原和重现、定位根源和修复这样的步骤进行调试。
1. 评估和快速修复
首先针对能够快速解决的错误进行修复。
这一步的关键是要 深刻理解CSS各种属性的内涵和效果，以避免当页面样式不符合预期时无法定位问题。
2. 还原和重现
初步定位问题后需要对问题进行复现。
- 方法：提出相关的HTML和CSS代码。
- 关键：精简代码，找出关键点。
对于CSS代码：
- 逐步增加/删除CSS以暴露问题；
- 利用CSS Validator进行检查。
对于HTML代码：
- 利用W3C Validator检查规范性。
- 将所有元素改成
div或者span类型，将所有选择器改为类选择器，以排除浏览器引入意外样式的可能性。
3. 定位根源并修复
- 如果是浏览器引入的意外样式，则想办法覆盖；
- 若不是，更换浏览器尝试是否会发生同样的现象，以确定是否是浏览器类型、浏览器版本等因素的原因，并通过bug追踪寻找解决方案；
- 重点关注
computed styles查看自己编写的CSS代码中哪些样式生效了、哪些被屏蔽了。
网友评论