让IE 6,7,8支持CSS3的部分属性及htc的应用

为了让IE 6,7,8支持CSS3的部分属性，我们需要使用一些hack和trick技巧。下面是一些实用的方法。

使用CSS3PIE.htc

CSS3PIE.htc是一个非常好用的工具，可以让IE6-8支持CSS3的部分属性。可以通过链接获取它：CSS3PIE.htc 或 GitHub链接。

我们只需要在CSS文件中引入它，并且在需要支持的元素上添加behavior属性，指向CSS3PIE.htc文件的路径即可。例如：

/* 引入CSS3PIE.htc文件 */
behavior: url(PIE.htc);

/* 添加border-radius属性 */
.border {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  /* 添加behavior属性，指向CSS3PIE.htc文件的路径 */
  behavior: url(PIE.htc);
}

使用浏览器前缀 -ms-

在某些CSS属性中，我们可以使用浏览器前缀-ms-来支持IE6-8的CSS3属性。例如：

.box {
  /* 支持IE10+的transform属性 */
  -ms-transform: rotate(30deg);
  /* 支持IE9+的transform属性 */
  -webkit-transform: rotate(30deg);
  /* 标准的transform属性 */
  transform: rotate(30deg);
}

这样，就可以让IE6-8支持CSS3的一些属性了。

实例说明

假设我们有一个圆形的按钮，希望在IE6-8中也能够支持圆角的效果。可以使用CSS3PIE.htc实现。

/* 引入CSS3PIE.htc文件 */
behavior: url(PIE.htc);

/* 添加圆角属性 */
button {
  border-radius: 10px;
  /* 添加behavior属性，指向CSS3PIE.htc文件的路径 */
  behavior: url(PIE.htc);
}

另一个例子，我们希望对IE6-8中的某个元素实现CSS3的动画效果。可以使用浏览器前缀-ms-实现。

.animation {
  /* 支持IE10+的动画属性 */
  -ms-animation: myanimation 2s infinite;
  /* 支持Webkit浏览器的动画属性 */
  -webkit-animation: myanimation 2s infinite;
  /* 标准的动画属性 */
  animation: myanimation 2s infinite;
}

/* 在keyframes中定义动画 */
@-webkit-keyframes myanimation {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}