IE6特殊的Bug

今天在做东西时,发现在一个ie6有趣但是又很无语的Bug,见图:

IE6下

image

正常效果

image

CSS

            .t {
                background: #ccc;
                border: 1px solid #ccc;
                width: 500px;
            }

            .t0 {
                margin: 0;
            }

            .t1 {
                float: left;
                margin-left: 2%;
                background-image: url(images/test-boder.jpg);
                height: 180px;
                position: relative;
                width: 10%;
            }

            .t2 {
                float: right;
                margin: 0;
            }

HTML

        <div class="t">
            <div class="t1 t0">
                thi is t1
            </div>
            <div class="t1">
                thi is t2
            </div>
            <div class="t1 t2">
                this is t3
            </div>
            <div style="clear: both">
            </div>
        </div>

测试网址(请在ie6下查看):http://yslove.net/lab/ie6-background-width.html

这个非常奇怪的效果,真是非常的奇特。

触发的条件也非常的苛刻,.t1必需要有的属性为:

background-image, position, width

position的值要为relative, width的值必需为百分比。

此时会发现t2已经在右边的margin值已经无效(注:不是双倍)

解决方法

将position变成static,或去掉background-images的属性,或者将width的值变为像素单位。

后记

在网上找了好久,都没找到为什么会这样,三个属性在ie6下竟然会发生这样的冲突,真是奇怪。并且我发现在在Quirks Mode下会发现在这样的情况,但是我的文件里并没有激发ie6的Quirks Mode。

不知道大家看到的效果是否跟我的一样。

此条目发表在 try it, 实验室 分类目录,贴了 标签。将固定链接加入收藏夹。