深圳博客技术论坛 » 【编程讨论学习】 » 『HTML/CSS技术』 » 实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码)

1/1页1 跳转到页查看:1350

发新话题

回复该主题

实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码)

winson

组别:管理员
性别:
积分:953
帖子:747

Medal No.1

Medal No.2

Medal No.3

Medal No.4

Medal No.5

2008-05-13 14:47 | 只看楼主 树型| 收藏| 小中大 1^#

实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码)

转自：http://www.cnblogs.com/JustinYoung/archive/2007/09/14/892414.html

首先解释一下标题的定语：

实例讲解的：文章中会出现可以运行并可立即看到结果的实例代码。
符合中国特色的：中国网民使用最多的浏览器是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;
}

下面的CssHack在这些浏览器中有效:

下面的CssHack在这些浏览器中无效:

#div2{
*border:2px solid red;
}

下面的CssHack在这些浏览器中有效:

下面的CssHack在这些浏览器中无效:

#div2{
_width:100px;
}

* html #div2{
height:100px;
}

下面的CssHack在这些浏览器中有效:

下面的CssHack在这些浏览器中无效:

*+html #div2{
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>

三种浏览器的最终效果图：

最后编辑

winson 最后编辑于 2008-05-13 14:49:05

随风飘飘天地任逍遥！
http://winson.szblogs.com
http://winsonet.cnblogs.com

<<上一主题|下一主题>>

1/1页1 跳转到页

发表新主题

回复该主题