Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

IE中Shadow滤镜的各种诡异情况分析

  有时候,明明设置了Shadow滤镜,浏览器却看不出任何效果。这是因为缺少hasLayout的缘故,IE6、7需要hasLayout才可以对这个滤镜生效,所以使用这个滤镜的时候最好加上zoom:1;来让IE6、7支持它。
<!DOCTYPE>
<style>
div {
  /*没有给他添加hasLayout*/
  border:1px solid red;font:32px/64px Simsun;
  filter:progid:DXImageTransform.Microsoft.Shadow(
    direction=180,color=#CCCCCC,strength=10
  );
}
</style>
<div>次碳酸钴</div>

  左边IE8右边IE6,用IE9和IE7测试也可以得到和下面一样的效果,IE6、7都需要hasLayout才能使Shadow生效。

  Shadow这个滤镜所做的事情实际上是在元素的透明区域绘制投影,如果没有对元素设置背景颜色那么背景就变成了透明区域,此时元素内的内容就可以被投影到元素的透明背景上。不仅是内容,边框也可以被投影到元素的透明区域上。如果对元素设置了背景,元素内就没有了透明区域,这种情况下元素的内容就不会投影到元素内。
  IE的滤镜有两种写法,一种是是完整的写法,就是上面那段代码中的。另一种是简短写法,直接filter:Shadow(...),不需要中间的一串东西。这两种写法得到的效果是不同的,用完整写法的投影可以可以超出元素本身的区域。也就是说即使给元素加了背景,投影也会投在元素的外面。如果用简短写法,投影就无法超出元素本身的大小,这种写法一旦设置了背景,由于没有透明区域投影就失效了。
<!DOCTYPE>
<style>
div {font:32px/64px Simsun;border:1px solid red;float:left;}
/*float有hasLayout的效果*/
.a {
  filter:progid:DXImageTransform.Microsoft.Shadow(
    direction=180,color=#CCCCCC,strength=10
  );
}
.b {filter:Shadow(direction=180,color=#CCCCCC,strength=10);}/*简短写法*/
</style>
<div class="a">次碳酸钴</div>
<div class="b">次碳酸钴</div>

  很显然,简短写法的滤镜下面没有投影,这就是它们的差别。
  最后还有个低版本浏览器的兼容性问题,在IE6、7下,如果元素以外的区域有投影,元素会被投影撑大。
<!DOCTYPE>
<style>
.panel {border:1px solid #CCC;}
.panel div {
  border:1px solid red;zoom:1;font:32px/64px Simsun;
  filter:progid:DXImageTransform.Microsoft.Shadow(
    direction=180,color=#CCCCCC,strength=10
  );
}
</style>
<div class="panel">
  <div>次碳酸钴</div>
</div>

  左边IE8右边IE6,IE6下容器被撑开了,因为容器内的元素的实际大小已经把投影计算在内了。其实这个是hasLayout的特性,IE6、7下都存在这个问题。现在我们把投影方向改成向上的试试!
<!DOCTYPE>
<style>
.panel {border:1px solid #CCC;}
.panel div {
  border:1px solid red;zoom:1;font:32px/64px Simsun;
  filter:progid:DXImageTransform.Microsoft.Shadow(
    direction=0,color=#CCCCCC,strength=10
  );
}
</style>
<div class="panel">
  <div>次碳酸钴</div>
</div>

  瞧啊,IE把它的奇葩展现的淋漓尽致了,对于向上的容器溢出IE8、9也已经无能为力了,而IE6、7依然懒洋洋的沿用hasLayout的特性。其实hasLayout是好东西,可以解决很多布局上麻烦的问题。在这个投影问题中,它就成了替罪羊,罪魁祸首是滤镜,滤镜本身存在太多BUG。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^