早有听闻 IE7+ 是支持 png 的,用下来感觉也还可以。但忽然之间,发现有一张 png 图片莫名其妙地黑底了,最先想到的是 png 的输出设置可能出现问题,于是试了 N 种设置黑底,只是黑底的形状有点不太一样,相当纳闷。没办法了,还原基本步。

<div id="box">I Believe</div>
<style>
#box {
    background: url(http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png) no-repeat;
    color: #FFFFCC;
    text-shadow: 1px 0 2px #897461, 0 1px 2px #897461, 0 -1px 2px #897461, -1px 0 2px #897461;
    filter: Dropshadow(offx = 1, offy = 0, color = #897461) Dropshadow(offx = 0, offy = 1, color = #897461) Dropshadow(offx = 0, offy = -1, color = #897461) Dropshadow(offx = -1, offy = 0, color = #897461);
    
    height: 200px;
    padding: 5px;
    width: 200px;
}
</style>

这个应用场景很简单,有一张 png 作为背景图,上面有些文字,对文字施加了一些发光效果(实际上阴影来实现)。在 firefox 和 IE 下的表现见下图:( chrome, opera 中的效果与 firefox 的相近,请暂时忽略发光效果的具体细节 )

怎么就多了那么一圈黑底呢。google 了一圈,貌似都是针对 IE6 的解救办法。

回头看 css 的设置也没有太大问题,背景设置用了无数遍了,文字阴影也是多处使用,基本排除了单个 css 设置的问题。莫非是和单独这张图片冲突,虽然想法很傻,但验证很简单,换张图片即可,但是问题依旧。

然后无奈之际,一下手贱删掉了 filter,居然好了。

原来 filter 设置会引起冲突,回头再想想在 IE6 里面就是使用 filter 来实现的 png 支持的。莫非 IE7,8 里面就是内置了这项设置?这是真正意义上的 png 支持么?真省啊。

问题的根源找到了,解决的办法就是在 #content 里再加一层 div,隔离他们的效果就是了,如此一来,为了兼顾这样的综合效果,不但 css 需要 hack,在 HTML 结构上也要相应地加入毫无意义的一层。

差距啊。其实就是那么一点一滴的差距,造就了今时今日的浏览器格局,形成了在人们心目中的印象。这又是 IE 是不好的浏览器的例证。