远离CSS BUG 尽量保持代码有语义

大凹人民忧伤

大凹人民忧伤

2016-02-19 23:30

下面是个远离CSS BUG 尽量保持代码有语义教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

相信大家对于常见 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、模块确认法

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

有时候我们也可以从页面的 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 ,生活越来越美好。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

远离CSS BUG 尽量保持代码有语义

Web开发
远离CSS BUG 尽量保持代码有语义

CSS也要语义化

Web开发
CSS也要语义化

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

IE CSS Bug

Web开发
IE CSS Bug

冬季要尽量早睡晚起保持充足睡眠

冬季养生
冬季要尽量早睡晚起保持充足睡眠

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

孩子饮食尽量远离罐头食品

电脑网络
孩子饮食尽量远离罐头食品

CSS BUG解决方法以及CSS BUG类的小技巧

Web开发
CSS BUG解决方法以及CSS BUG类的小技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Some guys are fated to be passersby 有些人注定错过

Some guys are fated to be passersby 有些人注定错过

RGBA颜色实现背景颜色透明而文字不透明

RGBA颜色实现背景颜色透明而文字不透明
下拉加载更多内容 ↓