不同瀏覽器對(duì)對(duì)不同的元素設(shè)置 通過(guò)對(duì)css的控制實(shí)現(xiàn)初始化

網(wǎng)頁(yè)學(xué)習(xí)者

不同瀏覽器對(duì)對(duì)不同的元素設(shè)置 通過(guò)對(duì)css的控制實(shí)現(xiàn)初始化

相同的元素，如li,在不同的瀏覽器下，顯示的效果會(huì)稍有不同！</br>
                    是因?yàn)楦鱾�(gè)瀏覽器對(duì)元素的margin\border\font-size等略有不同!</br>
                    杜絕這樣的情況，我們可以通過(guò)css的設(shè)置，讓他們?cè)诓煌�的瀏覽器中的顯示都是一樣就可以!<br/>
                    那么，這樣瀏覽器的顯示就一致了！減少了不兼容的情況發(fā)生！<br/>
                    這個(gè)過(guò)程，叫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. }

復(fù)制代碼

其他初始化代碼

1. 騰訊QQ官網(wǎng)(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. 新浪官網(wǎng)(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. 淘寶官網(wǎng)(http://www.taobao.com/)樣式初始化（淘寶的樣式是經(jīng)過(guò)壓縮的，我自己拷下來(lái)格式化過(guò)的）
    
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. 網(wǎng)易官網(wǎng)([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;}

復(fù)制代碼

下面是我們寫(xiě)的一個(gè)，可以交流哦哈，效果如下

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>新建網(wǎng)頁(yè)</title>
   
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
6. <meta name="description" content="道勤教育 http://bmrsportswear.com" />
   
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,在不同的瀏覽器下，顯示的效果會(huì)稍有不同！</br>
    
61.                     是因?yàn)楦鱾�(gè)瀏覽器對(duì)元素的margin\border\font-size等略有不同!</br>
    
62.                     杜絕這樣的情況，我們可以通過(guò)css的設(shè)置，讓他們?cè)诓煌�的瀏覽器中的顯示都是一樣就可以!<br/>
    
63.                     那么，這樣瀏覽器的顯示就一致了！減少了不兼容的情況發(fā)生！<br/>
    
64.                     這個(gè)過(guò)程，叫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>

復(fù)制代碼

道勤主機(jī)提供365天*24小時(shí)全年全天無(wú)休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過(guò)程中所遇到的一切問(wèn)題! 如果您是道勤主機(jī)用戶，那么您可以通過(guò)QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒(méi)問(wèn)題，點(diǎn)擊頁(yè)面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購(gòu)買后，我們?yōu)槟�免費(fèi)進(jìn)行無(wú)縫搬家服務(wù)，讓您享受網(wǎng)站零訪問(wèn)延遲的遷移到道勤主機(jī)的服務(wù)！