再谈浏览器兼容

早期我空间里的兼容文章

 

一、!important (功能有限)
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
例如:

#example {
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */
}

二、CSS HACK的方法(新手可以看看,高手就当路过吧)

首先需要知道的是:

所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;

例如:

#example { height:100px; } /* FF */

* html #example { height:200px; } /* IE6 */

*+html #example { height:300px; } /* IE7 */

下面的这种方法比较简单

举几个例子:

1、IE6 – IE7+FF

#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其实这个用上面说的第一种方法也可以
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}

2、IE6+IE7 – FF

#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}

3、IE6+FF – IE7

#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}

4、IE6 IE7 FF 各不相同

#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或:
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}

需要注意的是,代码的顺序一定不能颠倒了,要不又前功尽弃了。因为浏览器在解释程序的时候,如果重名的话,会用后面的覆盖前面的,就象给变量赋值一个道理,所以我们把通用的放前面,越专用的越放后面

解释一下4的代码:

读代码的时候,第一行height:100px; 大家都通用,IE6 IE7 FF 都显示100px
到了第二行*height:300px; FF不认识这个属性,IE6 IE7都认,所以FF还显示100px,而IE6 IE7把第一行得到的height属性给覆盖了,都显示300px
到了第三行_height:200px;只有IE6认识,所以IE6就又覆盖了在第二行得到的height,最终显示200px
这样,三个浏览器都有自己的height属性了,各玩各的去吧

这样说要是你还不明白,要么你去撞墙,要么我去!不过还是你去比较好。

哦,差点忘了说了:
*+html 对IE7的兼容 必须保证HTML顶部有如下声明:
〈!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“〉
三、使用IE专用的条件注释

〈!–其他浏览器 –〉

〈link rel=”stylesheet” type=”text/css” href=”css.css” /〉

〈!–[if IE 7]〉

〈!– 适合于IE7 –〉

〈link rel=”stylesheet” type=”text/css” href=”ie7.css” /〉

〈![endif]–〉

〈!–[if lte IE 6]〉

〈!– 适合于IE6及以下 –〉

〈link rel=”stylesheet” type=”text/css” href=”ie.css” /〉

〈![endif]–〉

貌似要编三套css,我还没用过,先粘过来再说

IE的if条件Hack

1. 〈!–[if !IE]〉〈!–〉 除IE外都可识别 〈!–〈![endif]–〉
2. 〈!–[if IE]〉 所有的IE可识别 〈![endif]–〉
3. 〈!–[if IE 5.0]〉 只有IE5.0可以识别 〈![endif]–〉
4. 〈!–[if IE 5]〉 仅IE5.0与IE5.5可以识别 〈![endif]–〉
5. 〈!–[if gt IE 5.0]〉 IE5.0以及IE5.0以上版本都可以识别 〈![endif]–〉
6. 〈!–[if IE 6]〉 仅IE6可识别 〈![endif]–〉
7. 〈!–[if lt IE 6]〉 IE6以及IE6以下版本可识别 〈![endif]–〉
8. 〈!–[if gte IE 6]〉 IE6以及IE6以上版本可识别 〈![endif]–〉
9. 〈!–[if IE 7]〉 仅IE7可识别 〈![endif]–〉
10. 〈!–[if lt IE 7]〉 IE7以及IE7以下版本可识别 〈![endif]–〉
11. 〈!–[if gte IE 7]〉 IE7以及IE7以上版本可识别 〈![endif]–〉注:gt = Great Then 大于
〉 = 〉 大于号
lt = Less Then 小于
〈 = 〈 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于

四、css filter的办法(据作者称是从国外某经典网站翻译过来的说)

新建一个css样式如下:

#item {

width: 200px;

height: 200px;

background: red;

}

新建一个div,并使用前面定义的css的样式:

〈div 〉some text here〈/div〉

在body表现这里加入lang属性,中文为zh:

〈body lang=”en”〉

现在对div元素再定义一个样式:

*:lang(en) #item{

background:green !important;

}

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:

#item:empty {

background: green !important

}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
五、FLOAT闭合(clearing float)

网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因。如果父div没有设 float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV。解决办法:
1、给父DIV也设上float(不要骂我,我知道是废话)

2、在所有子DIV后新加一个空DIV(不推荐,有些浏览器可以看见空DIV产生的空隙)

比如:

.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}

〈div〉
〈div〉〈/div〉
〈div 〉〈/div〉
〈div〉〈/div〉
〈/div〉

3、万能 float 闭合

将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:
〈style〉
/* Clear Fix */
.clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
〈/style〉

:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦。

4、overflow:auto(刚看到的,极力推荐)

只要在父DIV的CSS中加上overflow:auto就搞定。

举例:

.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}

〈div〉
〈div〉〈/div〉
〈div 〉〈/div〉
〈/div〉

作 者原话:原理是,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释)。现在只要将给外围元素添 加一个“overflow:auto”,就可以解决问题,结果是除了IE,真的可以解决。下来就要解决IE的问题了,再加上“_height:1%”,这 个问题就完全解决了。

我试了一下,其实不加”_height:1%“在IE下也行,留着吧。

六、需要注意的一些兼容细节

1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.

解决办法:给DIV设定IE、FF两个宽度,在IE的宽度前加上IE特有标记” * “号。
2, 页面居中问题.

body {TEXT-ALIGN: center;} 在IE下足够了,但FF下失效。

解决办法:加上”MARGIN-RIGHT: auto; MARGIN-LEFT: auto; ”

3, 有的时候在IE6上看见一些奇怪的间隙,可我们高度明明设好了呀。

解决办法:试试在有空隙的DIV上加上”font-size:0px;”

4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

5, 浮动IE6产生的双倍距离

#box{ float:left;
width:100px;
margin:0 0 0 100px;
}
这种情况之下IE6会产生200px的距离

解决办法:加上display:inline,使浮动忽略

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果

6 页面的最小宽度

min- width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得min-这个定义,但实际上它把正 常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里 这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重 要的。

解决办法:为了让这一命令在IE上也能用,可以把一个〈div〉 放到 〈body〉 标签下,然后为div指定一个类:
然后CSS这样设计:
#container{
min-width: 600px;
width:e­xpression(document.body.clientWidth 〈 600? “600px”: “auto” );
}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7、UL和FORM标签的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0;

解决办法:css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.

8 ,DIV浮动IE文本产生3象素的bug

下面这段是我在网上粘过来的

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
〈DIV id=box〉
〈DIV id=left〉〈/DIV〉
〈DIV id=right〉〈/DIV〉
〈/DIV〉

针对上面这段代码,下面说一下我的理解:

第一、只要right定义了width属性,在FF下绝对就会两行显示
第二、两个width都定义为百分比的话,就算都为100%在IE下也会一行显示。所以上面那句所谓“这句是关键”根本没用,不加也在一行,除非你width定义的是数值才用得上。

所 以说上面这段代码其实用处不大,至少在FF下不行。其实只要只定义left的width就行了,right不定义width就不管在IE还是FF下都能成 功,但这样的话父DIV BOX并没有真正的包含LEFT和RIGHT两子DIV,可以用我上面说的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就 OK了,真磨叽!
9,截字省略号

.hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾。技术是好技术,很多人都喜欢乱用,但注意Firefox并不支持。

正则表达式基础知识

一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。

如:
JScript VBScript 匹配 /^\[ \t]*$/ “^\[ \t]*$” 匹配一个空白行。 /\d{2}-\d{5}/ “\d{2}-\d{5}” 验证一个ID 号码是否由一个2位数字,一个连字符以及一个5位数字组成。 /<(.*)>.*<\/\1>/ “<(.*)>.*<\/\1>” 匹配一个 HTML 标记。

下表是元字符及其在正则表达式上下文中的行为的一个完整列表:
字符 描述 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。

例如,’n’ 匹配字符 “n”。’\n’ 匹配一个换行符。序列 ‘\\’ 匹配 “\” 而 “\(” 则匹配 “(“。

^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性,^ 也匹配 ‘\n’ 或 ‘\r’ 之后的位置。

$ 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性,$ 也匹配 ‘\n’ 或 ‘\r’ 之前的位置。

* 匹配前面的子表达式零次或多次。例如,zo* 能匹配 “z” 以及 “zoo”。* 等价于{0,}。

+ 匹配前面的子表达式一次或多次。例如,’zo+’ 能匹配 “zo” 以及 “zoo”,但不能匹配 “z”。+ 等价于 {1,}。

? 匹配前面的子表达式零次或一次。例如,”do(es)?” 可以匹配 “do” 或 “does” 中的”do” 。? 等价于 {0,1}。

{n} n 是一个非负整数。匹配确定的 n 次。例如,’o{2}’ 不能匹配 “Bob” 中的 ‘o’,但是能匹配 “food” 中的两个 o。

{n,} n 是一个非负整数。至少匹配n 次。例如,’o{2,}’ 不能匹配 “Bob” 中的 ‘o’,但能匹配 “foooood” 中的所有 o。

‘o{1,}’ 等价于 ‘o+’。’o{0,}’ 则等价于 ‘o*’。 {n,m} mn 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。例如,”o{1,3}” 将匹配 “fooooood” 中的前三个 o。

‘o{0,1}’ 等价于 ‘o?’。请注意在逗号和两个数之间不能有空格。 ? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 “oooo”,’o+?’ 将匹配单个 “o”,而 ‘o+’ 将匹配所有 ‘o’。

. 匹配除 “\n” 之外的任何单个字符。要匹配包括 ‘\n’ 在内的任何字符,请使用象 ‘[.\n]’ 的模式。 (pattern) 匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到,在VBScript 中使用 SubMatches 集合,在JScript 中则使用 $0$9 属性。

要匹配圆括号字符,请使用 ‘\(‘ 或 ‘\)’。 (?:pattern) 匹配 pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用 “或” 字符 (|) 来组合一个模式的各个部分是很有用。例如, ‘industr(?:y|ies) 就是一个比 ‘industry|industries’ 更简略的表达式。

(?=pattern) 正向预查,在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如,’Windows (?=95|98|NT|2000)’ 能匹配 “Windows 2000” 中的 “Windows” ,但不能匹配 “Windows 3.1” 中的 “Windows”。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。

(?!pattern) 负向预查,在任何不匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如’Windows (?!95|98|NT|2000)’ 能匹配 “Windows 3.1” 中的 “Windows”,但不能匹配 “Windows 2000” 中的 “Windows”。

预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始 x|y 匹配 xy。例如,’z|food’ 能匹配 “z” 或 “food”。'(z|f)ood’ 则匹配 “zood” 或 “food”。

[xyz] 字符集合。匹配所包含的任意一个字符。例如, ‘[abc]’ 可以匹配 “plain” 中的 ‘a’。

[^xyz] 负值字符集合。匹配未包含的任意字符。例如, ‘[^abc]’ 可以匹配 “plain” 中的’p’。

[a-z] 字符范围。匹配指定范围内的任意字符。例如,'[a-z]’ 可以匹配 ‘a’ 到 ‘z’ 范围内的任意小写字母字符。

[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如,'[^a-z]’ 可以匹配任何不在 ‘a’ 到 ‘z’ 范围内的任意字符。

\b 匹配一个单词边界,也就是指单词和空格间的位置。例如, ‘er\b’ 可以匹配”never” 中的 ‘er’,但不能匹配 “verb” 中的 ‘er’。

\B 匹配非单词边界。’er\B’ 能匹配 “verb” 中的 ‘er’,但不能匹配 “never” 中的 ‘er’。

\cx 匹配由 x 指明的控制字符。例如, \cM 匹配一个 Control-M 或回车符。

x 的值必须为 A-Z 或 a-z 之一。否则,将 c 视为一个原义的 ‘c’ 字符。 \d 匹配一个数字字符。等价于 [0-9]。

\D 匹配一个非数字字符。等价于 [^0-9]。 \f 匹配一个换页符。等价于 \x0c 和 \cL。 \n 匹配一个换行符。等价于 \x0a 和 \cJ。

\r 匹配一个回车符。等价于 \x0d 和 \cM。 \s 匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。

\S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。 \t 匹配一个制表符。等价于 \x09 和 \cI。 \v 匹配一个垂直制表符。等价于 \x0b 和 \cK。

\w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]’。 \W 匹配任何非单词字符。等价于 ‘[^A-Za-z0-9_]’。

\xn 匹配 n,其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如,’\x41′ 匹配 “A”。’\x041′ 则等价于 ‘\x04’ & “1”。

正则表达式中可以使用 ASCII 编码。. \num 匹配 num,其中 num 是一个正整数。对所获取的匹配的引用。例如,'(.)\1′ 匹配两个连续的相同字符。

\n 标识一个八进制转义值或一个向后引用。如果 \n 之前至少 n 个获取的子表达式,则 n 为向后引用。否则,如果 n 为八进制数字 (0-7),则 n 为一个八进制转义值。 \nm 标识一个八进制转义值或一个向后引用。如果 \nm 之前至少有 nm 个获得子表达式,则 nm 为向后引用。如果 \nm 之前至少有 n 个获取,则 n 为一个后跟文字 m 的向后引用。如果前面的条件都不满足,若 nm 均为八进制数字 (0-7),则 \nm 将匹配八进制转义值 nm。 \nml 如果 n 为八进制数字 (0-3),且 ml 均为八进制数字 (0-7),则匹配八进制转义值 nml。 \un 匹配 n,其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如, \u00A9 匹配版权符号 (©)。
下面看几个例子:
“^The”:表示所有以”The”开始的字符串(”There”,”The cat”等);
“of despair$”:表示所以以”of despair”结尾的字符串;
“^abc$”:表示开始和结尾都是”abc”的字符串——呵呵,只有”abc”自己了;
“notice”:表示任何包含”notice”的字符串。

‘*’,’+’和’?’这三个符号,表示一个或一序列字符重复出现的次数。它们分别表示“没有或
更多”,“一次或更多”还有“没有或一次”。下面是几个例子:

“ab*”:表示一个字符串有一个a后面跟着零个或若干个b。(”a”, “ab”, “abbb”,……);
“ab+”:表示一个字符串有一个a后面跟着至少一个b或者更多;
“ab?”:表示一个字符串有一个a后面跟着零个或者一个b;
“a?b+$”:表示在字符串的末尾有零个或一个a跟着一个或几个b。

也可以使用范围,用大括号括起,用以表示重复次数的范围。

“ab{2}”:表示一个字符串有一个a跟着2个b(”abb”);
“ab{2,}”:表示一个字符串有一个a跟着至少2个b;
“ab{3,5}”:表示一个字符串有一个a跟着3到5个b。

请注意,你必须指定范围的下限(如:”{0,2}”而不是”{,2}”)。还有,你可能注意到了,’*’,’+’和
‘?’相当于”{0,}”,”{1,}”和”{0,1}”。
还有一个’¦’,表示“或”操作:

“hi¦hello”:表示一个字符串里有”hi”或者”hello”;
“(b¦cd)ef”:表示”bef”或”cdef”;
“(a¦b)*c”:表示一串”a””b”混合的字符串后面跟一个”c”;

‘.’可以替代任何字符:

“a.[0-9]”:表示一个字符串有一个”a”后面跟着一个任意字符和一个数字;
“^.{3}$”:表示有任意三个字符的字符串(长度为3个字符);

方括号表示某些字符允许在一个字符串中的某一特定位置出现:

“[ab]”:表示一个字符串有一个”a”或”b”(相当于”a¦b”);
“[a-d]”:表示一个字符串包含小写的’a’到’d’中的一个(相当于”a¦b¦c¦d”或者”[abcd]”);
“^[a-zA-Z]”:表示一个以字母开头的字符串;
“[0-9]%”:表示一个百分号前有一位的数字;
“,[a-zA-Z0-9]$”:表示一个字符串以一个逗号后面跟着一个字母或数字结束。

你也可以在方括号里用’^’表示不希望出现的字符,’^’应在方括号里的第一位。(如:”%[^a-zA-Z]%”表
示两个百分号中不应该出现字母)。

为了逐字表达,必须在”^.$()¦*+?{\”这些字符前加上转移字符’\’。

请注意在方括号中,不需要转义字符。

关于CSS优先级的探讨

CSS 规则的优先级是Web前端开发人员必须理解的一个概念,我们常用的添加样式的方法有4种。

inline style
embeded style
external style
user style
inline style是丑陋的,它们穿梭在HTML文档中,与HTML元素扭成一团,给Web前端开发人员造成了许多麻烦。它们往往以这样的面目出现:

< p style=”color:red;”>This is a paragraph.< /p>
embeded style比inline style绅士一些,它们也寄宿在HTML文档中,但是它们不屑于与HTML元素扭成一团。它们往往在 < style> 元素中出现:

< style type=”text/css” media=”screen”> p{ color : red; }< /style>
external style是个贵族,它不愿意同HTML呆在一起,所以干脆以外部文件的形式独立存在。通常我们使用 < link> 元素或者@import语句将它们导入HTML。

< link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
我们应当尽可能使用external style,我想理由有很多,大家都知道,我也就不重复了。

还 有一种user style与以上三者略有不同,如果你使用IE浏览器,那么你可以在Tools – Internet Options – General – Appearance – Accessibility – User style sheet 下找到添加user style的地方(原谅我没有中文版的IE浏览器)。

既然我们有如此多的添加style的方法,那么难以避免样式会产生层叠。如:

< p class=”intro” style=”color:red;”>This is a paragraph.< /p>
我们在使用以上inline style的同时,又在我们的external style中使用了:

p{ color : yellow;}
我们甚至还在拥有 class=”intro” 的 < p> 元素上应用了:

p.intro{ color : blue;}
这样我们就 在同一元素的同一属性 color 上,拥有多条CSS规则指定了值 。这种情况被称为层叠(Cascading)。当层叠发生时,CSS Parser将根据优先级算法来确定最终选用的值。

优先级算法按照先后顺序考虑以下三个方面:

CSS规则的重要性和来源
CSS规则的特殊性
CSS规则在文档中出现的顺序
算法过程分为4步:

1、针对某一元素的某一属性,列出所有给该属性指定值的CSS规则。如上例中,在 class=”intro” 的 < p> 元素上,有三条CSS规则指定了 color 属性。

2、根据声明的重要性和来源进行优先级排序

重要性有两种:

important
normal(即非important)
在CSS规则后添加 !important 的重要性要高于没有添加的。

来源有三种:

user agent stylesheet – 浏览器默认样式
author stylesheet – 开发人员定义的样式
user stylesheet – 用户在浏览器中定义样式
重要性和来源的优先级排序从低到高是:
user agent stylesheet
user style sheets中的normal规则
author style sheets中的normal规则
author style sheets中的important规则
user style sheets中的important规则
经过以上排序,如果有一条CSS规则的优先级高于其他所有竞争规则,那么算法结束,返回该最高优先级指定的值。如果有多条CSS规则具有最高优先级,那么它们将要继续竞争下去,算法将进入第3步。
3、按照特殊性(Specificity)排序
CSS将计算多条规则中指定每一规则的selector的特殊性值,该值越高,优先级越高。
特殊性值是一个由4个整数组成的一个类似数组的值:a,b,c,d,其中a的权重最高,依次类推,d的权重最低。selector特殊性值的计算方法是:
如果该规则是一条inline style,那么a = 1
如果该规则由selector指定,selector中出现的id selector的数量就是b的值
如果该规则由selector指定,selector中出现的属性selector(包括class selector)或者伪类selector的数量总和就是c的值
如果该规则由selector指定,selector中出现的元素selector或者是伪元素selector的数量总和就是d的值。
universal selector * 的特殊性值为0,0,0,0
官方网站 提供了一些例子可以加深理解。
在根据特殊性值排序时,由于a的权重最高,因此首先比较a,在a相同的情况,在比较b,依次类推。因此不论b,c,d值有多大,inline style总是具有最高的特殊性。
如果根据以上特殊性排序后,有一条CSS规则的优先级高于其他所有竞争规则,那么算法结束,返回该最高优先级指定的值。如果有多条CSS规则具有最高优先级,那么它们将要继续竞争下去,算法将进入第4步。
4、比较CSS规则在文档中出现的顺序
出现在后的总是比出现在前的具有更高的优先级,因此出现在最后的那条语句将被作为该属性的值。

选择符规则: 计算特性
基于它们的特性级别,样式表也可以超越与之冲突的样式表,一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。
统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名格式。
最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表:
#id1 {xxx} /* a=1 b=0 c=0 –> 特性 = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 –> 特性 = 013 */
LI.red {xxx} /* a=0 b=1 c=1 –> 特性 = 011 */
LI {xxx} /* a=0 b=0 c=1 –> 特性 = 001 */

碰到ie6中设置display:none后,该层仍有占位问题

对于开始隐藏的层(有display:none;的层)只要加上float:none;就可以解决ie6的占位问题
—————————————————————————————-
制作了一个新页面,尝试完全自己编写tab标签效果。很快就编辑好了,效果非常的赞,在火狐和ie7运行完好,很兴奋,但是,在ie6上我又一次萎靡了~唉~
<div id=”a1″ >图片</div>
<div id=”a2″ style=”display:none”>图片</div>
<div id=”a”>
<div id=”a1″>第一个标签</div>
<div id=”a2″>第二个标签</div>
</div>
用这样的写法不知道为什么在ie6中总是走形,找了半天原因,主要是display:none隐藏层后,虽然看不到了,但还是占了一定的位置。
这让我很头疼,知道原因了,希望只动小部分代码或者css就改变现状,然布局恢复正常,但是都把自己弄睡着了也没有解决=。=
最后,只能退而求其次,用了个比较猥琐的方法,干脆把标签部分和切换层部分用两个大的层分隔开,居然就好用了~不解。
总之碰到这样的问题,你也找不到方法就先用这个方法将就一下,我现在还在寻找最好的方法,如果你有更好的方法,拜托分享一下,不胜感激:)

line-height在IE6中失效的问题与解决方法

做完了一个页面,只对FF和IE7做了兼容,之后在IE6下进行测试,整个内容都缩小了。
经过检查,发现是大多数(强调大多数很重要)的line-height失效,查看一下资料,了解到是因为li中加入图片,会导致line-height失效如
<ul>
<li><a href=”#”>1.css</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>2.li</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>3.热门</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>4.模板</a><img src=”images/icon9.gif” /></li>
<li><a href=”#”>5.百度</a></li>
<li><a href=”#”>6.google</a></li>
<li><a href=”#”>7.搜索</a></li>
<li><a href=”#”>8.解决办法</a></li>
</ul>[来源于http://bbs.blueidea.com/thread-2877695-1-1.html]

解决方法其实很简单,只要不在li中体现出图片的加入就可以,我们可以用很多方法来添加这个图片,虽然都比上述代码麻烦[谁叫ie6流氓呢]。推荐使用把图片单独放在一个li里。

其他方法参考下面:
1.用padding把li撑起来
2.单独把图片写在css中 background

附上其他关于IE6中line-height的失效问题和解决方法:
来源:蹄子流落人间 http://hi.baidu.com/ssl346/blog/item/594eb018bb5069b34aedbcee.html

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效; 同时以上元素的行高可能×2:

受影响的浏览器:
Microsoft Internet Explorer 5.01 / Windows
Microsoft Internet Explorer 5.5 / Windows
Microsoft Internet Explorer 6&nbsp;

解决方法:
对和文字相连接的img、input、textarea、select、object等元素加以属性

margin: (所属line-height-自身img,input,select,object高度)/2px 0;
vertical-align:middle

几十个网站统计数据的名词解释

浏览数Page Views:网页(含文件及动态网页)被访客浏览的次数。Page View的计算范围包括了所有格式的网页,例如:.htm、.html、.asp、.cfm、 asa、cdx、htmls、shtm、shtml、txt等等,可以由用户根据实际情况自己设定。

访问数Visits:也称为登陆数,一个登陆是指客户开始访问网站到离开网站的过程。其中:相邻两次点击页面时间间隔在30分钟以内(系统默认30分钟,用户可以修改默认值)为一次登陆,大于30分钟为两次登陆。

用户数Unique Visitors:也称为唯一客户数,是指一天内访问本网站的唯一IP个数。

点击数Hits:是指日志文件中的总记录条数。

停留时间Visiting Times:也称为访问时长,是用同一个访问过程中最后一个页面的访问时间减去第一个页面的访问时间,得到此访问在网站上的停留时间。

首页浏览数:网站首页被访客浏览的次数。

过滤浏览数Filter Page Views:网站中的某些页面并不是独立的页面,而是附属于某个页面,如滚动条页面就是附属于首页的页面,用户可以将这些附属页面设置为过滤页面,过滤页面被访客浏览的次数即为过滤浏览数。

有效浏览数Effective Page Views:去除过滤页面后的其他所有页面被访客浏览的次数,即有效浏览数=浏览数-过滤浏览数。

平均访问浏览数:一次访问平均产生的浏览数,即平均访问浏览数=浏览数÷访问数。

重复访问数Returning Visits during a day:一天内访问两次以上的用户数。

曝光数:广告弹出次数。

广告点击数:用户点击弹出广告的次数,即Click数。

返回数:通过电子邮件进行市场推广时,用户通过点击邮件中的链接地址访问网站的次数。

注册数:用户通过电子邮件和广告访问本网站,并最终转换为注册用户的数量。

返回率:广告弹出后,被用户点击的程度,即返回率=点击数÷曝光数×100%。

客户转化率:客户转化率包含两方面含义:用户通过广告访问本网站,并最终转化成注册用户的程度,即客户转化率=注册数÷点击数×100%;用户通过邮件上的链接地址访问本网站,并最终转化成注册用户的程度,即客户转化率=注册数÷返回数×100%。

发送字节数:从服务器端向客户端发出的字节数。

接收字节数:服务器端从客户端接收的字节数。

总字节数:是发送字节数和接收字节数的总和,即总字节数=发送字节数+接收字节数。

行为/路径:在一个访问过程中,客户访问过的所有页面的轨迹称为路径,或称为行为。

特定行为:由用户自行定义的行为,包含若干行为步骤,其中行为步骤不受限制,即可以任意设定行为步骤。进而分析出满足设定行为的发生次数及各个步骤之间的转化率。

特定行为转化率:在特定行为中,两个步骤之间的转化率。

行为入口:客户开始访问网站的第一个页面。在Web-IA中,根据入口给出典型行为分析。

行为出口:客户访问网站的最后一个页面。在Web-IA中,根据出口给出典型行为分析。

沉默时间:注册用户最后一次访问网站到分析日的天数。

沉默用户:在沉默时间内未访问网站的注册用户。

重复访问用户比例:一天内访问两次以上用户占总用户数的比例,该值越大表明用户品质越高,理想值为100%。

用户粘着度指数:一天内的总访问数与总用户数之比,该值越大表明用户品质越高。

重度访问用户:按每次访问的停留时间划分,把停留时间超过20分钟的用户归为重度访问用户;也可以按照每次访问产生的浏览数划分,把一次访问浏览超过10个页面的用户归为重度访问用户。对于重度访问用户,包括以下四个指标,每个指标值越大,表明用户品质越高。

重度用户比例(次数)=(浏览数≥11页面的访问数)÷总访问数

重度用户比例(时长)=(》20分钟的访问数)÷总访问数

重度用户指数=(》20分钟的浏览数)÷(》20分钟的访问数)

重度访问量比列=(》20分钟的浏览数)÷总浏览数

轻度访问用户:按每次访问的停留时间划分,把停留时间不超过1分钟的用户归为轻度访问用户。对于轻度访问用户,包括以下三个指标,每个指标值越小,表明用户品质越高。

轻度用户比例=(0-1分钟的访问数)÷总访问数

轻度用户指数=(0-1分钟的浏览数)÷(0-1分钟的访问数)

轻度访问量比例=(0-1分钟的浏览数)÷总浏览数

拒绝率:一次访问只访问一个页面的访问次数占总访问数的比例,比例越小,表明用户品质越高。

拒绝率(一个页面)=只访问1个页面的访问数÷总访问数

拒绝率(首页)=只访问首页的访问数÷总访问数

地区:访问客户的来源地区,是根据IP地区对照表,查询访问客户的IP地址落在哪个IP区段内,而得到其对应的地区。地区包括国内地区和国外地区,国内地区以省为单位,国外地区以国家为单位。

时段:按照一天24个小时自然时间段进行划分。

趋势:趋势分为两种,第一种是以时段为单位的一天24小时发展趋势。第二种是以日为单位的周、月、以及指定区间发展趋势。

IP地址:IP地址由4个数组成,每个数可取值0~255, 各数之间用一个点号“。”分开,例如: 202.103.8.46。

页面:网站中的所有格式的网页(含文件及动态网页),例如:.htm、.html、.asp、.cfm、 asa、cdx、htmls、shtm、shtml、txt等等,可以由用户根据实际情况自己设定属于页面的文件格式。

特定页面:对于需要特殊分析的页面,通过设置,从众多页面中独立出来,进行特定分析的页面。

过滤页面:网站中的某些页面并不是独立的页面,而是附属于某个页面,如滚动条页面就是附属于首页的页面,用户可以将这些附属页面设置为过滤页面。过滤后的浏览数方能真正反映网站的访问情况。

离开页面:客户访问网站的最后一个页面。

未定义页面:页面功能没有定义的页面,即没有归类到任何频道的页面。

频道/栏目:将网站中的各种内容根据功能归类,划分出若干逻辑上的频道或栏目。

网站:网站是由Web Server组成,专业版一个网站只有一个Web Server,企业版和商务版一个网站至少由一个Web Server组成。

热点:将一个网页中包含的各个链接根据功能归类划分出若干板块,比如新闻板块、财经板块、体育板块、科技板块等,每个板块成为一个热点。进而分析出该页面上的各个热点板块被点击的情况。

汇总:对多网站的分析进行汇总。

同期比较:对任意两个日、周、月、以及指定区间的浏览数(或访问数、或用户数、停留时间)进行比较。比较对象可以是页面、频道、栏目、广告、地区等。

聚合:对日期的聚合,比如周聚合就是将7天的数据合在一起为一个分析项,聚合目的就是以聚合项为单位分析网站发展的趋势。

环比:在趋势分析中,当前日期数据与上一日期数据的比成为环比。

跳转:状态代码为302的访问请求。(301的访问请求应该也是属于跳转吧)

热门:最受欢迎的页面或频道,即浏览数排名前若干位(可由用户自行定义)的页面或频道。

冷门:最不受欢迎的页面或频道,即浏览数排名后若干位(可由用户自行定义)的页面或频道。

广告:通过在别的网站上弹出窗口等方式介绍本网站的一种商业活动。

邮件:通过发送电子邮件,邮件中包含链接地址,吸引用户通过点击邮件中包含的链接地址访问本网站,实际上也是广告的一种。

搜索引擎:在互联网上为您提供信息“检索”服务的网站。

关键字:通过搜索引擎“检索”的内容。

Excel输出:将分析结果以Excel表格形式输出。

网站拓扑结构:网站的拓扑结构是由网站汇总、网站分析和频道分析三类节点构成。其中,网站汇总下可以有部门汇总,网站分析下可以有子网站,频道分析下可以有子频道。用户根据网站拓扑结构,来查询所需要的分析结果。

匿名用户:登陆网站不用确认身份,便可访问网站内容的用户。

认证用户:通过身份认证后,方可访问网站内容的用户。一般情况,用户通过注册成为认证用户。

日志文件:在Web-IA中,日志文件是指被分析网站的工作日志。

浏览器:客户端通过什么浏览器访问网站。

操作系统:客户端通过什么操作系统访问网站。

运营商:客户端接入互联网的服务提供商,比如中国电信、中国网通、教研网等。

接入方式:客户端接入互联网的方式,比如拨号、专线、ISDN、ADSL等。

状态代码:也称作错误代码,是为服务器所接收每个请求(网页点击)分配的 3 位数代码。

ie6下div最小高度问题

当你去设定一个div高度为小于该div字体时,发现height指定的值失效。

不管你怎么调小高度他还是那么宽~FF就不会出现这样的问题~
ie6 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 1px; 来定义了一个 div 的高度,实际在ie6下显示的仍然是一个字体大小高度的层。
解决办法:

<div style=”height: 1px; overflow: hidden;”></div>

问题跟进

其实上述的解决办法在设计时看来并不实用,最近看资料又发现既然ie6 会固执的认为这个层的高度不应该小于字体的行高,那么我们可以在标签内部或者css中设置字体大小

font-size:1px;

就可消除默认行高。