msn email google-talk twitter tumblr flickr

为ie6,ie7,ie8增加css3支持

虽然IE9一反常态的全力迎合标准,但是Ie6,7,8仍然拥有很高的市场占有率,与其消极的等这几款浏览器淡出主流,倒不如咱工程师们主动出击.老规矩先上链接:

http://fetchak.com/ie-css3/

这是老外给提供的一个让ie6-8简单支持css3的解决方案.主要实现css圆角和背景阴影效果.

如何使用
   1  .box {
   2        -moz-border-radius: 15px; /* Firefox */
   3        -webkit-border-radius: 15px; /* Safari and Chrome */
   4        border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
   5  
   6        -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
   7        -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
   8        box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
   9  
  10        behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
  11      }

最后一行就是要加在css中的代码,使用htc来hack.官方给的代码太少,我再补充点:

   1  .text{
   2    text-shadow: 1px 1px 2px #888888;
   3    behavior: url(ie-css3.htc);
   4  }
   5  
   6  .box{
   7    border-radius: 11px;
   8    behavior: url(ie-css3.htc);
   9  }
  10  
  11  .box{
  12    box-shadow: 10px 10px 10px #000;
  13    behavior: url(ie-css3.htc);
  14  }

基本就上面三种效果了,每次都要加上这么句behavior.简单测试了下,效果还不错(我对ie的效果要求相当低),加上后是有那么点一劳永逸的感觉 呵 ╯▽╰

不过使用过程中还是有几个小问题的.

behavior: url(...)的写法有点特别,可能习惯background-image: url(...)格式的人就会出这个问题.

You would expect URLs in behavior: url(...) to be relative to the current directory as they are in a background-image: url(...) style for example, but instead Microsoft decided to ignore standards here and make them relative to the docroot instead. So behavior: url(ie-css3.htc) should work if ie-css3.htc is in the root directory of the site.

意思就是微软给你下个套,behavior: url(ie-css3.htc)不是从当前目录下找htc文件,而是从根目录开始找起.换句话说,behavior: url(ie-css3.htc)写在css里面,htc文件就要放在网站的根目录下.呃…又一个大苍蝇,不过这个是使用htc的老问题了(记得当年的ie6支持png半透明效果的htc也得这么用),习惯就好.

剩下几个用的过程中可能会遇到的小问题,不翻译了:

You will probably run into issues with z-index, especially if embedding one IE-CSS3 enabled element inside of another. There are two simple workarounds:

Set the z-index of the IE-CSS3 element to a number larger than its surrounding elements.

Make sure the IE-CSS3 element is positioned, such as with position: relative or position: absolute

Sometimes an IE-CSS3 element will show up at a slightly different position than the original, untouched element. There could be a few reasons for this:

You have broken tags somewhere in your markup, probably above the IE-CSS3 element.

You are experiencing misc IE6 and IE7 bugs. Try adding the styles zoom: 1 and/or position: relative to the IE-CSS3 element and its immediate parent. You could also try removing any margins on the IE-CSS3 element and/or its parent, use padding instead.