粤ICP备11076303号  广州青年志愿者协会医疗服务总队 www.gzyld.org.cn
加入医疗队
加入志愿者

位置:GZ医疗队公益纪实公益站长网络技术

快速定位页面中复杂 CSS BUG


来源:      作者:      点击:87次      时间:2009-02-08

相信大家对于常见 CSS BUG 的处理已经相对比较熟悉,例如:IE6 Three Pixel GapIE5/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 ,生活越来越美好。

    自助功能
    评论搜索阅读 活动队员求助
        最 新 4 条 评 论     我 来 说 上 两 句 :【查看所有评论】
    闂傚倸鍊风粈渚€骞夐敓鐘冲仭闂侇剙绉寸粻顖炴煥閻曞倹瀚� 闂傚倷鐒﹂惇褰掑春閸曨垰鍨傚ù鐘差儏缁狀垶鏌ㄩ悤鍌涘 婵犵數濮甸鏍窗濮橆兘鏋嶉柕蹇嬪€曠粻顖炴煥閻曞倹瀚� 闂傚倸鍊风粈渚€骞夐垾婢勬盯骞嬮敃鈧粻顖炴煥閻曞倹瀚� 濠电姷鏁搁崕鎴犲緤閽樺褰掑礋椤栨氨顔嗛梺璺ㄥ櫐閹凤拷 闂傚倸鍊峰ù鍥敋閺嶎厼鐭楅煫鍥ㄧ☉缁狀垶鏌ㄩ悤鍌涘 婵犵數濮烽弫鎼佸磻濞戔挋銊╁焵椤掑嫭鐓欓柛鎴欏€栫€氾拷 闂傚倸鍊烽懗鍫曞箠閹惧瓨鍎熸繝濠傜墕缁狀垶鏌ㄩ悤鍌涘 闂傚倸鍊烽悞锔锯偓绗涘洤绀冨┑鐘宠壘缁狀垶鏌ㄩ悤鍌涘

    1.闂傚倸鍊风欢姘缚瑜嶈灋婵炲棙鎸婚崑瀣繆閵堝倸浜鹃柧鑽ゅ仱閺屾洟宕煎┑鎰у銈冨劚濡繈寮诲鍫闂佸憡鎸婚悷鈺呭春閵忋倕绫嶉柛顐f儕閳哄懏鐓忓璺虹墕閸旀粓鏌℃径瀣€愭慨濠冩そ濡啫鈽夊▎妯伙紒闂備線娼уú銊╁磻閻斿搫鍨濇慨妯挎硾闁卞洭鏌¢崶鈺佷户闁绘挻鍨甸—鍐Χ閸℃瑥顫ч梺鑽ゅ枂閸婃鎳炴潏銊ヮ嚤閻庢稒岣块崢閬嶆⒑閹稿孩鐓ラ柟纰卞亝閹便劑鍩€椤掆偓椤啴濡堕崱妯碱槰閻庡厜鍋撶紒瀣硶閺嗭箓鏌eΟ娆惧殭濞磋偐濞€閺屾盯寮撮妸銉ょ敖閻庡厜鍋撴繛鎴欏灪閻撶喖鏌i幇顒夊殶闁崇鍊濋弻娑㈠棘濞嗘儳鍓崇紓浣戒含閸嬫盯锝炲⿰鍫濈劦妞ゆ帒瀚粻姘舵煕閹伴潧鏋涚紒鈧€n偁浜滈柟鐑樺灥閳ь剙缍婂畷鐔搞偅閸愨斁鎷洪梺鍛婄☉閿曘儵鎮″☉銏$厸闁告侗鍠氶幊鍕磼瀹€鍐摵缂佺粯绻堝畷鎯邦槾闁伙絽鍟块—鍐Χ閸℃瑥顫ч柤瑁ゅ€濋弻娑氣偓锝庡亝瀹曞矂鏌℃担瑙勫磳闁轰焦鎹囬弫鎾绘晸閿燂拷

    2.闂傚倸鍊风粈浣革耿闁秲鈧倹绂掔€n亞锛涢梺鐟板⒔缁垶鎮″☉銏$厱妞ゆ劧绲跨粻銉︿繆閹绘帗鎲搁柟鍙夋倐瀵爼宕归鐟颁壕濠电姵鑹鹃弸浣广亜閺囨浜鹃悗瑙勬礃閿曘垽銆侀弮鍫濆窛妞ゆ牗绋掗蹇撯攽閻樻剚鍟忛柛鐘冲哺楠炲﹪骞樼拠鑼紮闂佸憡绋戦敃銉╁矗韫囨柣浜滈煫鍥ㄦ尰閸d粙鏌嶉悷鎵ч柡灞界Ч閸┾剝鎷呴崨濠冾吙缂傚倷娴囨ご鎼佹偋閺囥垺绠掗梻浣呵圭换妤佺珶閸喓鐝舵俊顖濆吹缁♀偓闂侀€炲苯澧撮柡浣规崌閺佹捇鏁撻敓锟�7濠电姷鏁搁崑鐐哄垂閸洖绠归柍鍝勫€婚々鍙夌節婵犲倸顏╂い鏇憾閺岀喖鏌囬敃鈧獮妤€鈹戦姘辨憼缂佺粯绻冪换婵嬪磼濮橀棿鐥梻浣瑰缁嬫垿藝閻㈢ǹ钃熸繛鎴欏灩缁犳稒銇勯幒宥囶槮婵炲拑绲介—鍐Χ閸℃ê闉嶉梺璇″枛閸婃悂顢氶敐鍡欘浄閻庯綆浜為鎰版⒑缂佹ê濮€闁哄懏绋掔粋宥嗐偅閸愨晝鍙嗛梺缁樻礀閸婂湱鈧熬鎷�

    3.闂傚倸鍊风粈渚€骞栭锔藉亱婵犲﹤鐗嗙粈鍫ユ煟閺冨洤浠遍柨婵嗩槹閺呮繈鏌涚仦鐐殤妞ゆ柨鐭傚楦裤亹閹烘垳鍠婃繛瀛樼矌閸嬬偛岣挎繝姘睄闁割偆鍠撻崢浠嬫⒑闂堟胆褰掑磿闁稁鏁傜憸鏃堝蓟閻旇偐宓侀柛顭戝枤娴犻箖姊洪悷鏉挎Щ闁硅櫕锚椤曪綁寮堕幋顓熷兊濡炪倖鍔戦崐妤呮偩妤e啯鈷掑ù锝囩摂閸ゅ啴鏌涘▎蹇涘弰鐎规洖缍婇幃鍓т沪缂併垺缍楁繝鐢靛█濞佳囶敄閸涘瓨鐓ラ柕鍫濐槹閻撴洟鏌曟径妯虹仯闁伙絽纾槐鎺楀焵椤掑倵鍋撻敐搴℃灍闁绘挻娲樼换娑㈠幢濡ゅ啰顔囬梺閫炲苯鍘哥紒顔界懇瀹曟椽鍩€椤掍降浜滈柟鍝勬娴滈箖姊洪崫銉ユ珡闁搞劏娉涢悾宄扳堪閸繄顓煎銈嗘濡嫰寮搁崒娑氱闁瑰墽顥愭竟姗€鏌ㄩ弴顏勵洭缂侇喖鐗婂鍕箾閻愵剦娼旈梻浣筋潐閸庡磭澹曢鐐存瘎缂傚倸鍊风拋鏌ュ磻閹剧粯鍊甸柨婵嗙凹缁ㄦ挳鏌$€n偆澧甸柡宀嬬節瀹曞爼鍩℃担閿嬪煕濠电偞娼欓崥瀣礉濞嗘挸绠栫憸鐗堝笒缁犳盯鏌涢幘鑼槮妞ゆ洟浜跺娲偡閹殿喚鏆涢梺鎼炲妺缁瑥顕i銏╁悑濠㈣泛顑嗗▍銏ゆ⒑鐠恒劌娅愰柟鍑ゆ嫹

      闂傚倸鍊风粈渚€骞夐敓鐘冲仭闁挎洖鍊搁崹鍌炴煟閵忋垺鏆╅柛妤佹皑閳ь剛鎳撶€氭澘顭胯箛姘兼▌閻庤娲樼敮鎺楋綖濠靛鏁勬い鎰惰抗椤忓洤绲归梻浣规偠閸庤崵寰婇懞銉︽珷闁圭粯宕¢崷顓熷厹闂佸灝顑呴锟�

    新活动 回顶部
    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名: 验证码:点击我更换图片
    最新评论 进入详细评论页>>