早有听闻 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 是不好的浏览器的例证。