[分享]css3属性怎么兼容ie

在现代web开发中，我们通常会使用CSS3来美化网页。然而，IE浏览器对CSS3的支持不够完善，这就会导致网页在IE浏览器中出现问题。为了解决这个问题，我们需要学会如何兼容IE浏览器。下面是一些常用的...

在现代web开发中，我们通常会使用CSS3来美化网页。然而，IE浏览器对CSS3的支持不够完善，这就会导致网页在IE浏览器中出现问题。为了解决这个问题，我们需要学会如何兼容IE浏览器。

下面是一些常用的CSS3属性，以及在IE浏览器中的兼容方法：

/* 圆角 */
div {
  border-radius: 10px; /* 标准写法 */
  -webkit-border-radius: 10px; /* Safari 和 Chrome */
  -moz-border-radius: 10px; /* Firefox */
  behavior:url(/border-radius.htc); /* IE6/7/8 */
}

/* 阴影 */
div {
  box-shadow: 10px 10px 5px #888; /* 标准写法 */
  -webkit-box-shadow: 10px 10px 5px #888; /* Safari 和 Chrome */
  -moz-box-shadow: 10px 10px 5px #888; /* Firefox */
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=135, Strength=5); /* IE9+ */
  zoom:1; /* IE6/7/8 */
}

/* 渐变 */
div {
  background: linear-gradient(red, yellow); /* 标准写法 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#FFFF00', GradientType=0); /* IE6-9 */
}

/* 媒体查询 */
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen; /* 标准写法 */
  }
}

@media screen\0 { /* IE8及以下 */
  body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 480px) and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ */
  body {
    background-color: lightgreen;
  }
} 

通过上面的兼容方法，我们可以在IE浏览器中正确地显示CSS3效果。但是，使用过多的兼容代码会影响网页的性能，所以请尽量使用标准的CSS3写法，只在必要时使用兼容代码。