不同浏览器对对不同的元素设置 通过对css的控制实现初始化

网页学习者

不同浏览器对对不同的元素设置 通过对css的控制实现初始化

相同的元素，如li,在不同的浏览器下，显示的效果会稍有不同！</br>
                    是因为各个浏览器对元素的margin\border\font-size等略有不同!</br>
                    杜绝这样的情况，我们可以通过css的设置，让他们在不同的浏览器中的显示都是一样就可以!<br/>
                    那么，这样浏览器的显示就一致了！减少了不兼容的情况发生！<br/>
                    这个过程，叫css初始化！<br/>


初始化代码如下：

1. /*css reset code */
   
2. 
   
3. /****  文字大小初始化,使1em=10px *****/
   
4. body {
   
5. font-size:62.5%;
   
6. } /* for IE/Win */
   
7. html>body {
   
8. font-size:10px;
   
9. } /* for everything else */
   
10. 
    
11. /*字体边框等初始化*/
    
12. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    
13. padding: 0;
    
14. margin: 0;
    
15. }
    
16. table {
    
17. border-collapse: collapse;
    
18. border-spacing: 0;
    
19. }
    
20. fieldset,img {
    
21. border: 0;
    
22. }
    
23. img {
    
24. display:block;
    
25. }
    
26. address,caption,cite,code,dfn,th,var {
    
27. font-weight: normal;
    
28. font-style: normal;
    
29. }
    
30. ol,ul {
    
31. list-style: none;
    
32. }
    
33. caption,th {
    
34. text-align: left;
    
35. }
    
36. h1,h2,h3,h4,h5,h6 {
    
37. font-weight: normal;
    
38. font-size: 100%;
    
39. }
    
40. q:before,q:after {
    
41. content:'';
    
42. }
    
43. abbr,acronym { border: 0;
    
44. }
    
45. 
    
46. a {
    
47. text-decoration:none;
    
48. }

复制代码

其他初始化代码

1. 腾讯QQ官网(http://www.qq.com[/url])样式初始化
   
2. 
   
3. 
   
4. body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
   
5. body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
   
6. a{color:#2d374b;text-decoration:none}
   
7. a:hover{color:#cd0200;text-decoration:underline}
   
8. em{font-style:normal}
   
9. li{list-style:none}
   
10. img{border:0;vertical-align:middle}
    
11. table{border-collapse:collapse;border-spacing:0}
    
12. p{word-wrap:break-word}
    
13. 新浪官网(http://www.sina.com.cn/)样式初始化
    
14. 
    
15. 
    
16. body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
    
17. body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
    
18. 
    
19. ul,ol{list-style-type:none;}
    
20. select,input,img,select{vertical-align:middle;}
    
21. 
    
22. a{text-decoration:none;}
    
23. a:link{color:#009;}
    
24. a:visited{color:#800080;}
    
25. a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
    
26. 淘宝官网(http://www.taobao.com/)样式初始化（淘宝的样式是经过压缩的，我自己拷下来格式化过的）
    
27. 
    
28. 
    
29. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    
30. body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    
31. h1, h2, h3, h4, h5, h6{ font-size:100%; }
    
32. address, cite, dfn, em, var { font-style:normal; }
    
33. code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    
34. small{ font-size:12px; }
    
35. ul, ol { list-style:none; }
    
36. a { text-decoration:none; }
    
37. a:hover { text-decoration:underline; }
    
38. sup { vertical-align:text-top; }
    
39. sub{ vertical-align:text-bottom; }
    
40. legend { color:#000; }
    
41. fieldset, img { border:0; }
    
42. button, input, select, textarea { font-size:100%; }
    
43. table { border-collapse:collapse; border-spacing:0; }
    
44. 网易官网([url]http://www.163.com/)样式初始化
    
45. 
    
46. 
    
47. html {overflow-y:scroll;}
    
48. body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
    
49. div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
    
50. table,td,tr,th{font-size:12px;}
    
51. li{list-style-type:none;}
    
52. img{vertical-align:top;border:0;}
    
53. ol,ul {list-style:none;}
    
54. h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
    
55. address,cite,code,em,th {font-weight:normal; font-style:normal;}

复制代码

下面是我们写的一个，可以交流哦哈，效果如下

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
   
3. <head>
   
4. <title>新建网页</title>
   
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
6. <meta name="description" content="道勤教育 http://www.daoqin.net" />
   
7. <style>
   
8.         /*css reset code */
   
9. 
   
10. /****  文字大小初始化,使1em=10px *****/
    
11. body {
    
12. font-size:62.5%;
    
13. } /* for IE/Win */
    
14. html>body {
    
15. font-size:10px;
    
16. } /* for everything else */
    
17. 
    
18. /*字体边框等初始化*/
    
19. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    
20. padding: 0;
    
21. margin: 0;
    
22. }
    
23. table {
    
24. border-collapse: collapse;
    
25. border-spacing: 0;
    
26. }
    
27. fieldset,img {
    
28. border: 0;
    
29. }
    
30. img {
    
31. display:block;
    
32. }
    
33. address,caption,cite,code,dfn,th,var {
    
34. font-weight: normal;
    
35. font-style: normal;
    
36. }
    
37. ol,ul {
    
38. list-style: none;
    
39. }
    
40. caption,th {
    
41. text-align: left;
    
42. }
    
43. h1,h2,h3,h4,h5,h6 {
    
44. font-weight: normal;
    
45. font-size: 100%;
    
46. }
    
47. q:before,q:after {
    
48. content:'';
    
49. }
    
50. abbr,acronym { border: 0;
    
51. }
    
52. 
    
53. a {
    
54. text-decoration:none;
    
55. }
    
56. </style>
    
57. </head>
    
58.     <body>
    
59.             <div>
    
60.                     相同的元素，如li,在不同的浏览器下，显示的效果会稍有不同！</br>
    
61.                     是因为各个浏览器对元素的margin\border\font-size等略有不同!</br>
    
62.                     杜绝这样的情况，我们可以通过css的设置，让他们在不同的浏览器中的显示都是一样就可以!<br/>
    
63.                     那么，这样浏览器的显示就一致了！减少了不兼容的情况发生！<br/>
    
64.                     这个过程，叫css初始化！<br/>
    
65.                     <ul>
    
66.                             <li>a</li>
    
67.                             <li>b</li>
    
68.                             <li>c</li>
    
69.                             <li>d</li>
    
70. 
    
71. 
    
72. 
    
73.                     </ul>
    
74. 
    
75. 
    
76.             </div>
    
77.     </body>
    
78. </html>

复制代码

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！