快捷搜索:

快速定位页面中复杂 CSS BUG-CSS教程-

信托大年夜家对付常见 CSS BUG 的处置惩罚已经比拟较较认识,例如:IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰着繁杂的 CSS BUG 问题,所谓“繁杂”实质是指触发的前提很繁杂,而“BUG” 也并非指必然是浏览器的 BUG 。对付此类问题,我们首先要办理的是若何定位到问题,只有快速的定位到问题,才能更好的办理问题。

对付快速定位,小我的履历处置惩罚一样平常如下(基础可以定位到我在 淘宝 碰到的 90% 以上的繁杂 CSS BUG 问题):

1、反省页面的标签是否闭合

不要鄙视这条,大概折腾了你两天都没有办理的 CSS BUG 问题,却仅仅源于这里。终究页面的模板一样平常都是由开拓来嵌套的,而他们很轻易犯此类问题。

快捷提示:可以用 Dreamweaver 打开文件反省,一样平常没有闭合的标签,会黄色背景高亮。

2、样式扫除法

有些繁杂的页面大概加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的详细 CSS 文件,缩小锁定的范围。

对付刚才锁定的问题 CSS 样式文件,逐行删除详细的样式定义,定位到详细的触发样式定义,以致是详细的触发样式属性。

3、模块确认法

无意偶尔候我们也可以从页面的 HTML 元素启程。删除页面中不合的 HTML 模块,探求到触发问题的 HTML 模块。

4、反省是否清除浮动

着实有不少的 CSS BUG 问题是由于没有清除浮动造成的。养成优越的清除浮动的习气是需要的,保举应用 无额外 HTML 标签的清除浮动的措施(只管即便避免应用 overflow:hidden;zoom:1 的类似措施来清除浮动,会有太多的限定性)。

5、反省 IE 下是否触发 haslayout

很多的 IE 下繁杂 CSS BUG 都与 IE 特有的 haslayout 相互关注。认识和理解 haslayout 对付处置惩罚繁杂的 CSS BUG 会事半功倍。保举涉猎 old9 翻译的 《On having layout》(假如无法翻越穿越巨大年夜的 GFW,可涉猎 蓝色上的转帖 )

快捷提示:假如触发了 haslayout,IE 的调试对象 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。

6、边框背景调试法

故名思议便是给元素设置显眼的边框或者背景(一样平常玄色或血色),进行调试。此措施是最常用的调试 CSS BUG 的措施之一,对付繁杂 BUG 依旧适用。经济实惠还环保^^

着末想给大年夜家强调一点的是,养成优越的书写习气,削减额外标签,只管即便语义,相符标准,着实可以为我们削减很多额外的繁杂 CSS BUG,更多的时刻着实是我们自己给自己制造了麻烦。盼望大年夜家阔别 BUG ,生活越来越美好。

您可能还会对下面的文章感兴趣: