IE6特殊的Bug

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

IE6下

正常效果

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。

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

原创文章转载请注明：YSlove.net
本文固定链接:http://yslove.net/2009/09/ie6-background-width-position-bug/

如果你喜欢请+1 ^_^

Tags: ie6

RSS 2.0
trackback