<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:18px;}
li{ list-style:none;}
#nav{ position:relative; width:600px; margin:0 auto 10px; height:22px;}
#nav ul{ position:absolute;}
#nav ul li{ float:left; display:inline; width:120px; height:18px; padding-top:4px; overflow:hidden; margin:0 2px; text-align:center; background:#F5F5F5; color:#990; border:1px solid #EEE8DD; cursor:pointer; }
#nav ul .nav-on{height:auto;}
#nav ul li ul{ position:static;}
#nav ul li ul li{ display:block; padding:0; margin:0; height:27px; border:none;}
#nav ul li ul li a{ display:block; height:18px; padding:5px 0 4px; color:#666; text-decoration:none;}
#nav ......
转自：http://www.div-css.com/html/XHTML-CSS/hack/1136667.html
区别不同浏览器，CSS hack写法：
区别IE6
与FF
：
background:orange
;*
background:blue
;
区别IE6
与IE7
：
background:green
!important
;background:blue
;
区别IE7
与FF
：
background:orange
; *
background:green
;
区别FF
，IE7
，IE6
：
background:orange
;*
background:green
!important
;*background:blue
;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6
IE7
FF
*
√
√
×
!important
×
√
√
另外再补充一个，下划线"_
",
IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6
，IE7
，firefox
:
background:orange
;*
background:green
;_
background:blue
;
注：不管是什么方法，书写的顺序都是firefox的写在 ......
CSS优先级包含四个级别（文内选择器，ID选择器，Class选择器，元素选择器）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。
CSS优先级的计算规则如下：
* 页面中直接设置style,加1,0,0,0
* 每个ID选择器(如 #id),加0,1,0,0
* 每个Class选择器(如 .class)、每个属性选择器(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
* 每个元素选择器（如p）或伪元素选择器(如 :firstchild)等，加0,0,0,1
然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，
然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。
例子：
css文件或<style>中如下定义：
1. h1 {color: red;}
/* 一个元素选择符，结果是0,0,0,1 */
2. body h1 {color: green;}
/* 两个元素选择符，结果是 0,0,0,2 */
3. h2.grape {color: purple;}
/* 一个元素选择符、一个Class选择符，结果是 0,0,1,1*/
4. li#answer {color: navy;}
/* 一个元素选择符，一个ID选择符，结果是0,1,0,1 */
5. 元素的style属性中如下定义：h1 {color: blue;}
/* 页面中定义，一个元素选择符，结果是1,0,0,1*/
如此以来，h1元素的颜色是蓝色。
注意：
1、!important声明的 ......
看看下面这段代码，是否倍感亲切但又觉得很陌生呢：
.test {
background-color: black; /* firefox, opera, ie8 */
[;background-color: green;] /* safari, chrome */
*background-color: blue; /* ie7 */
_background-color: red; /* ie6 */
}
html*~/**/body .test {
border: 5px solid red; /* ie8 */
}
随着浏览器的更新换代，CSS Hack 变得越来越诡异和不可靠了-.-
相对来说，IE 的条件注释是值得信赖的：
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->>
<!--[if !IE]>--><body><!--<![endif]-->
<style type="text/css">
body.ie6 .test { background-color: blue }
body.ie7 .test { background-color: red }
body.ie8 .test { background-color: green }
</style>
注意，上面的代码虽然也是 hack，但大大简化和规范了 css hack 的写法。
最近看 ExtCore 3.0 的代码，发现 Ext 初始化时会自动给 body � ......
碰到好些问题，Firefox下面看着很完美，ie6下面就惨不忍睹，还好，一点点慢慢解决了。一些东西摘录一下，以后也许用得到。
DIV+CSS解决IE6，IE7，IE8，FF兼容问题
那我来说说吧，做了几年的DIV+CSS，也积累了不少解决兼容问题的方法，我这里只说现在主流的几个，（IE6，IE7，IE8，FF）其它的没去研究过
1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如
margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10px
3.清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片的时候，会出现背景 断开或差一小块。这种兼容出现的不太多，我做到现在，只遇到过两次，方法是在出现兼容的DIV的CSS中写一个display:block，或其它属性， 中文什么意思我不知道，我英语差，但能达到想要的效果，6 e” Z+ e% |8 G# |
4.很多朋友DIV+CSS的时候� ......
CSS 基础语法
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 <head> 标签内部）
4. 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS 语法由三部分构成：选择器、属性和值：
Eg: selector {property : value}--àbody {color: blue};
值的不同写法和单位
除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
p { color: #ff0000; }
为了节约字节，我们可以使用 CSS 的缩写形式：
p { color: #f00; }
我们还可以通过两种方法使用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。 ......
最新文章 : css