实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码)
首先解释一下标题的定语：
- 实例讲解的：文章中会出现可以运行并可立即看到结果的实例代码。
- 符合中国特色的：中国网民使用最多的浏览器是IE和FireFox。所以这些CssHack主要是为了解决这2种浏览器的兼容问题。中国电脑用户的操作系统主要是Windows，所以这些CssHack主要针对Windows操作系统浏览器，并不包含Mac等。
- 符合网络现状的：现在网民中最多使用的浏览器是IE6（或者IE6内核的浏览器），其次是IE7（或者IE7内核的浏览器），再次是FireFox。所以这些CssHack主要是为了解决这3种浏览器的兼容问题。
- 实用的：这些CssHack都是比较简单而且有效的。
- 首先应该明确的是：尽量不要使用css hack，因为它的向后兼容是未知的。
- 基于现在中国互联网的现状,这里主要对IE6，IE7和FF的最常用且实用的css Hack进行了介绍，但是并不表示css只有这些。（比较完整请访问:CSS hack浏览器兼容一览表 ）
- 有些其实已经不是css hack了，而是css的一些新的选择器，例如"#div1>#div2"和"#div1:first-child",对于这样的选择器一般可以放心的使用，因为有较好的向后兼容性。
下面的CssHack在这些浏览器中有效:
下面的CssHack在这些浏览器中无效:
#div1:first-child{
color:red;
}
#div1>#div2{
font-size:200%;
}
html[xmlns] #div2{
text-decoration:underline;
}
color:red;
}
#div1>#div2{
font-size:200%;
}
html[xmlns] #div2{
text-decoration:underline;
}
下面的CssHack在这些浏览器中有效:
下面的CssHack在这些浏览器中无效:
#div2{
*border:2px solid red;
}
*border:2px solid red;
}
下面的CssHack在这些浏览器中有效:
下面的CssHack在这些浏览器中无效:
#div2{
_width:100px;
}
* html #div2{
height:100px;
}
_width:100px;
}
* html #div2{
height:100px;
}
下面的CssHack在这些浏览器中有效:
下面的CssHack在这些浏览器中无效:
*+html #div2{
background-color:yellow
}
background-color:yellow
}
下面是完整的代码，你可以在不同的浏览器下浏览以便查看效果。
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!" />
<meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
<title>CSS/Javascript demo</title>
<style type="text/css">
*{
font-size:medium;
margin:2px;
padding:2px;
}
/*
valid : FF IE7 OP8
invalid : IE6
*/
#div1:first-child{
color:red;
}
#div1>#div2{
font-size:200%;
}
html[xmlns] #div2{
text-decoration:underline;
}
/*
valid : IE6 IE7
invalid : FF OP8
*/
#div2{
*border:2px solid red;
}
/*
valid : IE6
invalid : FF IE7
*/
#div2{
_width:100px;
}
* html #div2{
height:100px;
}
/*
valid : IE7
invalid : FF IE6
*/
*+html #div2{
background-color:yellow
}
/*Test Min-height*/
#div3{
border:1px dotted green;
width:100px;
/*min-height is valid in FF and IE7.
it's very important for kill "auto height" problem*/
min-height:100px;
height:50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
i'm test text.
</div>
<div id="div3">
test min-height!
</div>
<p>
首先应该明确的是：尽量不要使用css hack，因为它的向前兼容是未知的。<br/>
基于现在中国互联网的现状,这里主要对IE6，IE7和FF的最常用且实用的css Hack进行了介绍，但是并不表示css只有这些。<br/>
有些其实已经不是css hack了，而是css的一些新的选择器，例如"#div1>#div2"和"#div1:first-child",对于这样的选择器一般可以放心的使用，因为有较好的向后兼容性。
</p>
</div>
</body>
</html>
三种浏览器的最终效果图：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!" />
<meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
<title>CSS/Javascript demo</title>
<style type="text/css">
*{
font-size:medium;
margin:2px;
padding:2px;
}
/*
valid : FF IE7 OP8
invalid : IE6
*/
#div1:first-child{
color:red;
}
#div1>#div2{
font-size:200%;
}
html[xmlns] #div2{
text-decoration:underline;
}
/*
valid : IE6 IE7
invalid : FF OP8
*/
#div2{
*border:2px solid red;
}
/*
valid : IE6
invalid : FF IE7
*/
#div2{
_width:100px;
}
* html #div2{
height:100px;
}
/*
valid : IE7
invalid : FF IE6
*/
*+html #div2{
background-color:yellow
}
/*Test Min-height*/
#div3{
border:1px dotted green;
width:100px;
/*min-height is valid in FF and IE7.
it's very important for kill "auto height" problem*/
min-height:100px;
height:50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
i'm test text.
</div>
<div id="div3">
test min-height!
</div>
<p>
首先应该明确的是：尽量不要使用css hack，因为它的向前兼容是未知的。<br/>
基于现在中国互联网的现状,这里主要对IE6，IE7和FF的最常用且实用的css Hack进行了介绍，但是并不表示css只有这些。<br/>
有些其实已经不是css hack了，而是css的一些新的选择器，例如"#div1>#div2"和"#div1:first-child",对于这样的选择器一般可以放心的使用，因为有较好的向后兼容性。
</p>
</div>
</body>
</html>
