[分享]css兼容ie9ie10

随着CSS3的不断发展，越来越多的新的CSS属性被引入，但是很多这些属性在IE9和IE10上的兼容性并不是很好。在这篇文章中，我们将探讨如何用CSS在IE9和IE10上实现兼容性。首先，我们要知道IE...

随着CSS3的不断发展，越来越多的新的CSS属性被引入，但是很多这些属性在IE9和IE10上的兼容性并不是很好。在这篇文章中，我们将探讨如何用CSS在IE9和IE10上实现兼容性。

首先，我们要知道IE9和IE10并不支持一些新的CSS3选择器，如“:nth-child”，这意味着我们需要重新考虑我们的选择器。在这种情况下，我们可以使用JavaScript来模拟这些选择器。

 /* IE9和IE10不支持的伪类 */
   li:nth-child(3n+1) {
     color: red;
   }

   /* 用JavaScript模拟伪类 */
   var liList = document.getElementsByTagName("li");
   for (var i = 0; i < liList.length; i++) {
     if (i % 3 == 0) {
       liList[i].style.color = "red";
     }
   } 

另一个需要注意的问题是IE9和IE10对一些CSS属性的支持不完全。例如，IE9和IE10不支持“border-radius”属性，这意味着我们需要使用IE9和IE10支持的CSS属性来模拟“border-radius”效果。

 /* 用CSS3的方式设置border-radius */
   div {
     border-radius: 5px;
   }

   /* IE9和IE10显示扁平的角 */
   /* 使用IE平台的filter属性模拟border-radius效果 */
   div {
     border: 1px solid #333;
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, FinishX=100, StartY=0, FinishY=100, GradientType=1);
   } 

最后，我们需要考虑的是字体。在IE9和IE10中，如果您的网站使用非IE平台的字体，那么您可能会看到字体不像预期那样显示。这是因为IE9和IE10在解析非IE平台字体时可能会遇到一些问题，导致字体看起来不一致。因此，我们建议您使用基本的字体，并遵循一些最佳实践，以确保您的字体在IE9和IE10中正确显示。

在这篇文章中，我们探讨了如何用CSS在IE9和IE10上实现兼容性。虽然IE9和IE10并不支持CSS3的所有功能，但是我们可以使用一些技巧来解决这些问题。我们希望这篇文章对您有所帮助！