解决网页在IE7中的兼容情况：*
如：.content{height:30px;/*正常显示效果*/ *height:20px;/*IE7显示效果*/}
解决网页在IE8中的兼容情况：
在网页头部做个判断即可。
<!DOCTYPE HTML>
<!--[if IE 8 ]> <html class="ie8" > <![endif]-->
<!--[if ! IE 8]>
<html>
<!--<![endif]-->
<head>
如果是在IE8浏览器下就用类名以.ie8为前缀的样式。
如：.content{height:30px;}/*其他浏览器中显示的样式*/
.ie8 .content{height:20px;}/*IE8中显示的样式*/
解决网页在火狐中的兼容情况：
@-moz-document url-prefix(){ /*在这里写必要的样式*/ }
注：这个是解决所有火狐浏览器不兼容情况的方法。
解决网页在IE9中的兼容情况：
\9\0（只使用于IE9，其他浏览器不识别）
解决网页在IE10中的兼容情况：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.hacktest { background-color:green; } /* for IE10+ 此写法可以适配到高对比度和默认模式，故可覆盖所有ie10的模式 */
}
选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
目前最常见的是
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
等等
时间： 2024-10-10 16:16:27