现在的位置: 首页 > 综合 > 正文

CSS初始化代码,重置浏览器中CSS默认属性(2)

2013年11月28日 ⁄ 综合 ⁄ 共 7269字 ⁄ 字号 评论关闭

 

相信很多人听说过Hack,就是在CSS代码里加入一些如* html,+hmtl, /**/,这些代码在IE里能被识别,其它浏览器不能,也有些IE6可以,IE7不能识别,就是通过这样的方法,来写针对不同浏览器的CSS代码。

这里有几篇文章是介绍Hack的,还有收集了目前的一些Hack,可以点过去看看。先别急着点,继续往下看吧。最后我才把链接贴上,因为下面的内容更重要。比你漫无目的找HACK实用。

这里介绍几个经典的区别不同浏览器,CSS hack写法太多了,也很杂,这里我就介绍几款实用的,又容易记的写法:

------------------------------经典方案一---------------------------------

  1. 注:IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!important;FF不能识别*,但能识别!important;   
  2.   
  3. 写两句代码来控制一个属性,区别Firefox与IE6:   
  4. background:orange;*background:blue;   
  5.   
  6. //这一句代码写出来时,你用firefox或其它非IE浏览时,会发现,写了该代码的区域背景是橙色的,如果用IE浏览,却是蓝色的,这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;   
  7.   
  8.   
  9. 写两句代码来控制一个属性,区别IE7与IE6:   
  10. background:green !important;background:blue;   
  11.   
  12. // 这一句代码写出来时,你用IE7浏览,会发现,写了该代码的区域背景是绿色的,如果用IE6浏览,却是蓝色的,这是因为IE7能识别!important*,一但识别了,就执行,忽略了后面的那一句,但IE6却不能识别!important,所以前面部分跳过,直接执行了后半部份。   
  13.   
  14.   
  15. 写两句代码来控制一个属性,区别Firefox与IE:   
  16. background:orange; *background:green;   
  17.   
  18. //这一句代码写出来时,你用Firefox浏览,会发现背景是橙色的,而IE里却是绿色的,很简单,因为Firefox不能识别*,而IE6,IE7都可以识*   
  19.   
  20.   
  21. 写三句代码来控制一个属性,区别Firefox,IE7,IE6:   
  22. background:orange;*background:green !important;*background:blue;   
  23.   
  24. // 这一句会使在Firefox在,背景呈橙色,IE7中为绿色,IE6中为蓝色,道理和前面一样,Firefox不能识别*,所以后面两句都不执行,直接执行第一句,IE7当然也能执行第一行代码,但是因为第二句,他也能识别,所以就执行了第二句代码,把前面的效果给过滤了,而最后一句,IE7是不能识别的。IE6不能识别!imprtant,本来运行了第一句代码了,第二句不能识别,那就理所当然的执行了最后一句。   
  25.   
  26. 以上HACK用法,可以实现不同浏览器的CSS代码,但是却不能通过CSS代码验证工具的验证!其实通不通过都无所谓,主要是实用,至少我是这样认为。如果你想要写能通过验证的HACK。那么请继续往下看第二种方案。   
  27.   

注:IE 都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!important;FF不能识别*,但能识别!important; 写两句代码来控制一个属性,区别Firefox与IE6: background:orange;*background:blue; //这一句代码写出来时,你用firefox或其它非IE浏览时,会发现,写了该代码的区域背景是橙色的,如果用IE浏览,却是蓝色的,这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;写两句代码来控制一个属性,区别IE7与IE6: background:green !important;background:blue; //这一句代码写出来时,你用IE7浏览,会发现,写了该代码的区域背景是绿色的,如果用IE6浏览,却是蓝色的,这是因为IE7能识别!important*,一但识别了,就执行,忽略了后面的那一句,但IE6却不能识别!important,所以前面部分跳过,直接执行了后半部份。写两句代码来控制一个属性,区别Firefox与IE: background:orange; *background:green; //这一句代码写出来时,你用Firefox浏览,会发现背景是橙色的,而IE里却是绿色的,很简单,因为Firefox不能识别*,而IE6,IE7都可以识* 写三句代码来控制一个属性,区别Firefox,IE7,IE6: background:orange;*background:green !important;*background:blue; //这一句会使在Firefox在,背景呈橙色,IE7中为绿色,IE6中为蓝色,道理和前面一样,Firefox不能识别*,所以后面两句都不执行,直接执行第一句,IE7当然也能执行第一行代码,但是因为第二句,他也能识别,所以就执行了第二句代码,把前面的效果给过滤了,而最后一句,IE7是不能识别的。IE6不能识别!imprtant,本来运行了第一句代码了,第二句不能识别,那就理所当然的执行了最后一句。以上HACK用法,可以实现不同浏览器的CSS代码,但是却不能通过CSS代码验证工具的验证!其实通不通过都无所谓,主要是实用,至少我是这样认为。如果你想要写能通过验证的HACK。那么请继续往下看第二种方案。

------------------------------经典方案二---------------------------------

  1. 下面介绍用* html,* +html的hack写法,此方法可以通过CSS验证,也比较规范。哈哈,HACK本来是不归范的产物,只是我个人认为这种Hack写法是Hack写法中的规范而已,不要拿东西砸我!!!   
  2.   
  3. 我写一个例子   
  4.   
  5. #sample {background:red;}   
  6.   
  7. * html #sample {backgroud:green;}   
  8.   
  9. * +html #sample{backgroud:blue}   
  10.   
  11. 在DW中建立一个sample层,写入以上代码,运行一下看看,你会在Firefox或是Netscape或Opera中看到,sample的背景色是红色的。在IE6中看到背景色是绿色的,而在IE7中却是蓝色的。好玩吧~   
  12.   
  13. 同样,你也可以应用到class和body中去,一样的道理,三个写法:   
  14.   
  15. 第一个是标准写法,针对所有浏览器都有效,但是一样的CSS在不同的浏览器中会变形,这个道理你明白吧,要不然你也不会来看我这篇文章了。Firefox,Oprea等非IE浏览器,不识别下面两种写法,所以理所当然的执行了第一种CSS代码,为红色背景。   
  16.   
  17. 第二个是只针对IE6,只有IE6会执行,其它浏览器都不执行。那么Firefox,IE7都不会读到这里的代码,IE6本来第一种是能执行的,可是因为第二种能识别,所以过滤了第一种的红色效果,变成了绿色背景。   
  18.   
  19. 第三个只针对IE7,只有IE7才能执行。IE6,firefox都不识别,当然只有IE7自己执行啦,同样的道理,能执行第一种,变成红色,可又被第三种过滤成蓝色背景。   

下面介绍用* html,* +html的hack写法,此方法可以通过CSS验证,也比较规范。哈哈,HACK本来是不归范的产物,只是我个人认为这种Hack写法是Hack写法中的规范而已,不要拿东西砸我!!!我写一个例子 #sample {background:red;} * html #sample {backgroud:green;} * +html #sample{backgroud:blue} 在DW中建立一个sample层,写入以上代码,运行一下看看,你会在Firefox或是Netscape或Opera中看到,sample的背景色是红色的。在IE6中看到背景色是绿色的,而在IE7中却是蓝色的。好玩吧~ 同样,你也可以应用到class和body中去,一样的道理,三个写法: 第一个是标准写法,针对所有浏览器都有效,但是一样的CSS在不同的浏览器中会变形,这个道理你明白吧,要不然你也不会来看我这篇文章了。 Firefox,Oprea等非IE浏览器,不识别下面两种写法,所以理所当然的执行了第一种CSS代码,为红色背景。第二个是只针对IE6,只有IE6 会执行,其它浏览器都不执行。那么Firefox,IE7都不会读到这里的代码,IE6本来第一种是能执行的,可是因为第二种能识别,所以过滤了第一种的红色效果,变成了绿色背景。第三个只针对IE7,只有IE7才能执行。IE6,firefox都不识别,当然只有IE7自己执行啦,同样的道理,能执行第一种,变成红色,可又被第三种过滤成蓝色背景。

------------------------------经典方案三---------------------------------

  1. 第一种或是第二种方案,写出来的CSS文件代码长的很,特别是第二种,这样载入CSS时,会很缓慢,对网站设计没有好处。如果你做的是比较大的网站,还是建议你用下面这种方法,就是通过javascript判断浏览器的类型,然后针对不同的浏览器链接不同的CSS文件。   
  2.   
  3. 我们针对不同的浏览器开发出不同的CSS文件,一个针对IE,一个针对Firefox,一个针对其它所有类型的浏览。这样,我们在设计时,就不用去考虑太多,只要我这个CSS能在FF中正常显示,我就不管IE下执行下怎么样了,同样IE中正常的CSS,也不去管它在FF中会是显示如何的乱。   
  4.   
  5. 首先,我们在HTML代码里要放入<link> </link>标签,标签里先写入默认要用到的CSS文件的位置,建议放IE中用到的CSS文件,比如<link href="../css/ie.css" rel="stylesheet" type="text/css">,这样能避免在对方浏览器没有开启javascript的时候,无法判断浏览器类型的时候,也能以90%以上人使用的IE正常显示。   
  6.   
  7. 把下面这段JS放在HEAD中   
  8. <SCRIPT LANGUAGE="JavaScript">   
  9. <!--   
  10. if (window.navigator.userAgent.indexOf("MSIE")>=1)   
  11. {   
  12. //如果浏览器为IE,调用../css/ie.css   
  13. setActiveStyleSheet("ie.css");   
  14. }else{   
  15. if (window.navigator.userAgent.indexOf("Firefox")>=1)   
  16. {   
  17. //如果浏览器为Firefox,调用../css/firefox.css   
  18. setActiveStyleSheet("firefox.css");   
  19. }else{   
  20. //如果浏览器为其他,调用../css/other.css   
  21. setActiveStyleSheet("other.css");   
  22. }   
  23. }   
  24.   
  25. function setActiveStyleSheet(title){   
  26.          document.getElementsByTagName("link")[0].href="../css/"+title;   
  27. //document.getElementsByTagName("link")[0].href="/blog/css/"+title; 这一行中的0是指第一个名为<link>的标签,改为1,则表示第二个名为<link>的标签。href=“”里面就是放置 CSS文件的路径,而title就是CSS文件的文件名   
  28. }   
  29. //-->   
  30. </SCRIPT>   
  31.   
  32. window.navigator.userAgent.indexOf后面是浏览器的类型,如果是Opera的话,还可以加一条if来判断,用javascript 的条件判断去写吧,我这里不多说了。   

第一种或是第二种方案,写出来的CSS文件代码长的很,特别是第二种,这样载入CSS时,会很缓慢,对网站设计没有好处。如果你做的是比较大的网站,还是建议你用下面这种方法,就是通过javascript判断浏览器的类型,然后针对不同的浏览器链接不同的CSS文件。我们针对不同的浏览器开发出不同的 CSS文件,一个针对IE,一个针对Firefox,一个针对其它所有类型的浏览。这样,我们在设计时,就不用去考虑太多,只要我这个CSS能在FF中正常显示,我就不管IE下执行下怎么样了,同样IE中正常的CSS,也不去管它在FF中会是显示如何的乱。首先,我们在HTML代码里要放入<link> </link>标签,标签里先写入默认要用到的CSS文件的位置,建议放IE中用到的CSS文件,比如<link href="../css/ie.css" rel="stylesheet" type="text/css">,这样能避免在对方浏览器没有开启javascript的时候,无法判断浏览器类型的时候,也能以90%以上人使用的IE正常显示。把下面这段JS放在HEAD中 <SCRIPT LANGUAGE="JavaScript"> <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { //如果浏览器为IE,调用../css/ie.css setActiveStyleSheet("ie.css"); }else{ if (window.navigator.userAgent.indexOf("Firefox")>=1) { //如果浏览器为Firefox,调用../css/firefox.css setActiveStyleSheet("firefox.css"); }else{ //如果浏览器为其他,调用../css/other.css setActiveStyleSheet("other.css"); } } function setActiveStyleSheet(title){ document.getElementsByTagName("link")[0].href="../css/"+title; //document.getElementsByTagName("link")[0].href="/blog/css/"+title; 这一行中的0是指第一个名为<link>的标签,改为1,则表示第二个名为<link>的标签。href=“”里面就是放置 CSS文件的路径,而title就是CSS文件的文件名 } //--> </SCRIPT> window.navigator.userAgent.indexOf后面是浏览器的类型,如果是Opera的话,还可以加一条if来判断,用 javascript 的条件判断去写吧,我这里不多说了。

 

 

 

 

CSS reset Styles for all browsers(CSS初始化代码,重置浏览器中CSS默认属性)

1 /**********************************
 2
 3 Use: Reset Styles for all browsers
 4
 5 ***********************************/
 6
 7 body, p, blockquote {
 8 margin: 0;
 9 padding: 0;
10 }
11
12 a img, iframe { border: none; }
13
14 /* Headers
15 ------------------------------*/
16
17 h1, h2, h3, h4, h5, h6 {
18 margin: 0;
19 padding: 0;
20 }
21 <!--more-->
22 h1 { font-size: 150%; }
23 h2 { font-size: 140%; }
24 h3 { font-size: 130%; }
25 h4 { font-size: 120%; }
26 h5 { font-size: 110%; }
27
28 /* Lists
29 ------------------------------*/
30
31 ul, ol, dl, li, dt, dd {
32 margin: 0;
33 padding: 0;
34 }
35
36 /* Links
37 ------------------------------*/
38
39 a, a:link {}
40 a:visited {}
41 a:hover {}
42 a:active {}
43
44 /* Forms
45 ------------------------------*/
46
47 form, fieldset {
48 margin: 0;
49 padding: 0;
50 }
51
52 fieldset { border: 1px solid #000; }
53
54 legend {
55 padding: 0;
56 color: #000;
57 }
58
59 input, textarea, select {
60 margin: 0;
61 padding: 1px;
62 font-size: 100%;
63 font-family: inherit;
64 }
65
66 select { padding: 0; }

 

抱歉!评论已关闭.