css3 兼容 ie7 |为什么css旋转效果只有一次

下面大家就来介绍一些 CSS3 兼容 IE7 的解决方案：

/* 解决 IE7 中不支持的属性 */
selector {
-ms-transform: property value; /* 兼容 IE9+ */
zoom: 1; /* 兼容 IE6+ */
}
/* 解决 IE7 中不支持的选择器 */
selector:first-child+* {
property: value;
}
/* 解决 IE7 中不支持的伪类 */
selector:hover {
property: value;
}
/* 解决 IE7 中不支持的属性值 */
selector {
background: transparent url('image.png') no-repeat fixed 0 0;
background: url('image.png') no-repeat fixed 0 0; /* IE7 */
}
/* 解决 IE7 中不支持的单位 */
selector {
width: 100px;
width: 10rem; /* IE9+ */
}
/* 解决 IE7 中不支持的渐变 */
selector {
background: #fff;
background: -ms-linear-gradient(top, #ccc, #eee); /* IE9+ */
background: linear-gradient(to bottom, #ccc, #eee); /* 非 IE9+ */
}
/* 解决 IE7 中不支持的圆角 */
selector {
border-radius: 10px;
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari/Chrome */
behavior: url(border-radius.htc); /* IE7+ */
}

有时候，由于 IE7 中的 CSS 渲染引擎与标准有些出入，大家需要通过一些 hack 来使样式在 IE7 中正确展现。下面介绍一些常见的 IE7 hack：

/* \9 表示 IE7 及以下版本，注意要放在属性值的末尾 */
selector {
property: value\9;
}
/* * 表示 IE7 及以下版本，注意要放在属性名后面 */
selector {
property*: value;
}
/* _ 表示 IE6；* 表示 IE7 及以下版本 */
selector {
property: value\9; /* IE7 */
property: value\0/; /* IE8 */
property: value\9\0/; /* IE9 */
*property: value; /* IE7 及以下版本 */
_property: value; /* IE6 */
}
/* 针对 IE7 的文本清晰度 hack */
selector {
-ms-interpolation-mode: nearest-neighbor; /* 取消文本平滑 */
}
/* 针对 IE7 的以下元素的行高 hack */
selector {
*vertical-align: baseline;
*display: inline-block;
*zoom: 1;
}

总的来说，兼容 IE7 是前端开发的一项必备技能。通过对 CSS3 的学习和熟练应用一些 hack 技巧，大家可以更好地制作出友好的网站，并向更多用户展示大家的优秀作品。