Silentash-默尘

置换元素在 IE 浏览器中有不少问题，比方说置换元素的行高就是其中难题之一，当然还有 form 元素 textarea 的边距继承 bug，OK，今天再介绍几个，凑满一箩筐

之前有讲过 IE6 下多余的注释会引起浮动容器的字符复制BUG。根据这个原理，解决了不少相似的问题，不过今天碰到的却让我人很头疼，原因是这次出问题的是iframe。

废话不多讲，直接看代码：
[code=html]

[/code]

在开发过程中，新排的版面在 IE 浏览器中出现到了一个很奇特的现象，搞的我愣了好一会，后来才弄明白是怎么一回事，其实很早之前就在老外博客里看过这个 BUG 的表现，但一直没碰到过，今天算是逮了个正着。
做个示例重现一下 BUG，无论你是否已经知道这个 BUG，请与我一起瞻仰伟大的 IE6,IE7 之风采~~~
效果（IE浏览器中必有惊喜）
[code=html]

[/code]

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之后，奇怪的问题就出现了……

刚刚到淘宝上面买了点东西，在订单状态页面无意中将鼠标移到了右上角的“我的订单”按钮上，出现的框框被下面的订单状态层给遮住了，只露出了一点点尖尖角=.=!

我分别用IE和FF做了截图

IE：


FF：

分析原因

首先可以肯定的是，这个BUG是由多个注释引起的。我在这里放了50个相同的注释，问题就相当的严重=.=!
不过附加的注释只有在第二个浮动元素右边触碰到外围边框或者距外围边框小于3PX的时候才会触发这个BUG，貌似是因为IE6默认的给予了第二个浮动容器3个象素的右边Margin一样，因此，当这个容器和外面的容器同样宽度时，没有足够的空间去释放这3个象素的右边距，产生了这个让人郁闷的BUG。

此BUG只出现在IE6及以下版本浏览器中，不过这个BUG貌似地球人都知道了，其实原因都不是很明白，就是知道如何解决！

请在IE6下测试，IE7正常，请比较。
[code=html]

[/code]