深入了解CSS 解决浮动元素消失BUG
2008-09-12 19:27:02 来源:WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鐐劤缂嶅﹪寮婚悢鍏尖拻閻庨潧澹婂Σ顔剧磼閹冣挃闁硅櫕鎹囬垾鏃堝礃椤忎礁浜鹃柨婵嗙凹缁ㄧ粯銇勯幒瀣仾闁靛洤瀚伴獮鍥敍濮f寧鎹囬弻鐔哥瑹閸喖顬堝銈庡亝缁挸鐣烽崡鐐嶆棃鍩€椤掑嫮宓佸┑鐘插绾句粙鏌涚仦鎹愬闁逞屽墰閹虫捇锝炲┑瀣╅柍杞拌兌閻ゅ懐绱撴担鍓插剱妞ゆ垶鐟╁畷銉р偓锝庡枟閻撴洘銇勯幇闈涗簼缂佽埖姘ㄧ槐鎾诲礃閳哄倻顦板┑顔硷工椤嘲鐣烽幒鎴旀瀻闁规惌鍘借ⅵ濠电姷鏁告慨顓㈠磻閹剧粯鈷戞い鎺嗗亾缂佸鏁婚獮鍡涙倷閸濆嫮顔愬┑鐑囩秵閸撴瑦淇婇懖鈺冪<闁归偊鍙庡▓婊堟煛鐏炵硶鍋撻幇浣告倯闁硅偐琛ラ埀顒冨皺閺佹牕鈹戦悙鏉戠仸闁圭ǹ鎽滅划鏃堟偨缁嬭锕傛煕閺囥劌鐏犻柛鎰ㄥ亾婵$偑鍊栭崝锕€顭块埀顒佺箾瀹€濠侀偗婵﹨娅g槐鎺懳熺拠鑼舵暱闂備胶枪濞寸兘寮拠宸殨濠电姵纰嶉弲鎻掝熆鐠虹尨宸ョ€规挸妫濆铏圭磼濡搫顫嶇紓浣风劍閹稿啿鐣烽幋锕€绠婚悹鍥у级瀹撳秴顪冮妶鍡樺鞍缂佸鍨剁粋宥夋倷椤掍礁寮垮┑鈽嗗灣閸樠勭妤e啯鍊垫慨妯煎亾鐎氾拷

IE捉迷藏bug(peek-a-boo),之所以起这个名称是因为在某些条件下文本看起来消失了,只有在重新装载页面时才再度出现。出现这个bug的条件是:一个浮动元素后而跟着一些非浮动元素,然后是一个清理元素,所有这些元素都包含在一个设置了背景颜色或图像的你元素中。如果清理元素砬到了浮动元素,那么中间的非浮支元素看起来消失了,隐到了父元素的背景颜色或图像后面,只有在刷新页面时才重新出现。
幸运的是,有许多方法可以解决这个bug。最容易的方法可能是去掉父元素上的背景颜色或图像。但是,这常常是不可行的。另一个方法是避免清理元素与浮动元素接触。如果窗口元素应用了特定的尺寸,那么这个bug似乎就不会出殃了。如果给窗口指定行高,这个bug也不会出现。最 后,将浮动元素和容器元素的position属性设置为relative也会减轻这个问题。
解决方案
1.在对页面上的对象使用float浮动之后,最后在下面使用带有clear:both;的div对页面进行一些浮动上的清理工作,并且尽量避免对#layout使用background。
2.如果有可能,可以给#layout使用因定宽和高度,尽管之样会对页面有所限制,但能消除一些捉迷藏的影响。
3.可以尝试给#layout和#left使用position:relative。
4.对#layout使用line-height属性,强制浏览器对其中的内容进行行距调整,从面可以消除捉迷藏bug,例如使用line-height:1.2;就能够使页面运作变得正常。
捉迷藏bug虽然是IE留下的后遗症,但是另一方面我们应当在div的嵌套上遵循一些习惯,尽量使用最少的层次嵌套来满足页面设计需要,使页面结构简单,实用,易控制与管理,尽可能的减少由于不必要的嵌套引来的连锁问题。
更多精彩
赞助商链接