最近较多地使用到了960gs,我更喜欢把它的所有css文件压缩成一个,作为公共库被页面包括起来。期间倒是遇到几个让人抓狂的问题,导致莫名其妙的状况出现,还得我很长一段时间都不知道是为什么。最终目标锁定到压缩的960gs,经过严密排查才发觉症状所在!正好,引以为戒,自己动手修改了其中某些地方,也算加深了对一些浏览器之间差异的了解。
以下便是曾经遇到过的一个头疼问题:
先来看页面1:/wp-content/uploads/2009/11/ie-bgi-bug-1.html。非ie下是正常的,ie中背景图无法显示。仔细查看css,没啥大问题啊,难道是第8行默认设置(960gs就把所有元素的背景色设置为透明)搞的鬼?
把第8行删了,页面2一切恢复原状:/wp-content/uploads/2009/11/ie-bgi-bug-2.html。十分搞不懂这是为什么,或许是个很低级的问题吧,忘知道的人赐教。
再来看页面3:/wp-content/uploads/2009/11/ie-bgi-bug-3.html。依旧保持第8行默认样式,但为ol设置了一个高度,于是乎ie6完美呈现,其它的只显示一半。很简单ie6会自动撑开高度。
最后是页面4:/wp-content/uploads/2009/11/ie-bgi-bug-4.html。保持第8行默认样式,不为ol设置高度,但为ol的li设置了个宽度(width:1px;高度也一样),于是乎所有的浏览器都皆大欢喜。
这个bug原本的表现是在一个很复杂的页面中,为一个ul的li设置backgroundimage出现的。结果ie6下出现了闪烁,鼠标移入移出都会造成其不稳定的显示、消失或闪烁。我本以为是老bug了,借用document.execCommand便可搞定,哪知道根本不起作用。最后花了好多时间,才弄清楚。
Posts Tagged ‘BackgroundImage’

本博客所有文章均采用