[分享]css兼容性写法ie9以下

CSS是构建网页布局和样式的重要工具，但不同浏览器对其支持程度不同，特别是一些旧版本的IE浏览器。下面介绍一些CSS兼容性写法，以适配IE9以下的浏览器。1. 使用外部样式表将CSS样式写在外部样式表...

CSS是构建网页布局和样式的重要工具，但不同浏览器对其支持程度不同，特别是一些旧版本的IE浏览器。下面介绍一些CSS兼容性写法，以适配IE9以下的浏览器。

1. 使用外部样式表

将CSS样式写在外部样式表文件中，使用link标签引入，这样可以保证每个浏览器都能正常支持。使用pre标签来展示外部样式表的写法：

<link rel="stylesheet" type="text/css" href="style.css"> 

2. 针对IE9以下单独写样式

由于IE9以下浏览器不支持某些CSS属性或值，可以使用条件注释判断浏览器版本，然后单独针对IE9以下浏览器写相关样式。使用pre标签展示条件注释的写法：

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="style-ie.css">
<![endif]--> 

3. 浏览器前缀

为了兼容不同浏览器，CSS3引入了浏览器前缀，但是IE浏览器并不支持这些前缀，因此需要针对IE9以下的浏览器写不带前缀的样式。使用pre标签展示浏览器前缀的写法：

.box {
    background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#e6e6e6));
    background: -moz-linear-gradient(top, #aaa, #e6e6e6);
    background: linear-gradient(to bottom, #aaa, #e6e6e6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaa', endColorstr='#e6e6e6', GradientType=0);
} 

4. 可替换元素样式

在IE9以下的浏览器中，可替换元素（如img、object等）的默认样式不同于其他浏览器。可以通过为这些元素设置display:block或vertical-align:middle等属性，来达到一致的表现效果。使用pre标签展示可替换元素样式的写法：

img {
    display: block;
    vertical-align: middle;
    max-width: 100%;
} 

总之，通过以上一些CSS兼容性写法，我们可以有效地针对IE9以下的浏览器提供相应的样式支持，使网页在不同浏览器中呈现出一致的表现效果。