Web 开发中经常会用到背景图,多数时候我们还需要用 CSS 动态调整背景图的位置。比如 Google 首页中的Toolbar 动画,就是用了一整张背景图,用 JS 控制元素的背景样式,实现动画效果。

不过 IE6 下默认不缓存背景图片,CSS 里每次更改图片的位置时都会重新发起请求,有时会造成图片抖动现象。我们可以用一段 JS 代码告诉 IE6 缓存背景图,这样就能避免再次请求。

document.execCommand("BackgroundImageCache", false, true);

IE7 已经修复了这个 BUG ,所以只需要针对 IE6 就可以了。Ext 的源码时已经考虑到了这一点,在 Ext.js 中给出了他的实现,在其它 Ajax 框架中不是很清楚有没有这种类似的代码,从这一个细节上就能看出Ext的全面!

var isIE = ua.indexOf("msie") > -1, isIE7 = ua.indexOf("msie 7") > -1;
// remove css image flicker
if(isIE && !isIE7){
    try{
        document.execCommand("BackgroundImageCache", false, true);
    }catch(e){}
}

用HTML的条件注释也可以

<!--[if IE 6]>
<script type="text/javascript">
    try{
        document.execCommand("BackgroundImageCache", false, true);
    }catch(e){}
</script>
<![endif]-->

PS: 口水ing Google 首页的Toolbar动画效果^_^

阅读全文
 
, , ,

如果IE6浏览器是一个活生生的人,我真的很想把他拖出去海扁一顿,直到他体无完肤、摇摇欲坠,我还想耍一通“还我漂漂拳~~~”扫除IE6满身的BUG,至少把他打成IE7的人模人样,也算造福了全人类~~~~

阅读全文
 
, , , , ,

 In IE6 or IE7, when an absolutely positioned div locates beside a float div, it maybe disappeared.

在IE6或IE7,当一个绝对定位元素与浮动元素相邻时,绝对定位元素有可能消失。

说有可能,是因为IE6和IE7的消失情况不太一样!

文中列举了不同情况下的DEMO,请用IE6,IE7,FF做对比浏览……

阅读全文
 
, , , , ,

说明:并不清楚这算不算的上是一个BUG,不过的确是一个挺奇怪的现象,这一次出现问题的是IE7,而IE6反而是正常的。
现象:本意是为了设置外容器的padding为10px 5px 0 5px;然而给外容器加上overflow:hidden之后,奇怪的问题就出现了……

阅读全文
 
, , ,

很多BUG都是IE6上面的老BUG了,不过还是有很多鲜为人知的,需要时常关注,虽然IE7已经和FF有70%的近似度,不过M$依旧,BUG依旧!
这个网站收录了很多BUG解决方法,推荐收藏
网址:http://www.positioniseverything.net

我决定要把里面的文章翻译成中文,供自己和CSS爱好者学习参考之用。请支持我吧!

阅读全文
 
, ,