由于用戶使用瀏覽器不同，我們制作出網(wǎng)站之后，希望自己做網(wǎng)站在不同瀏覽器下顯示都是正常的，但往往會(huì)出現(xiàn)在某些瀏覽器下顯示正常，有些瀏覽器卻出現(xiàn)網(wǎng)站版面錯(cuò)位的情況。

網(wǎng)站版面錯(cuò)位的原因

• 對(duì)于一些IE老版瀏覽器，如IE6、IE7,，對(duì)于網(wǎng)站樣式文件CSS中的樣式代碼認(rèn)識(shí)與新版瀏覽器有很多不同。例如CSS中margin屬性，低版本的IE瀏覽器會(huì)顯示雙倍于我們?cè)O(shè)置的值，這樣就很容易出現(xiàn)版面錯(cuò)位。
• 網(wǎng)站的兼容性CSS樣式?jīng)]有寫好，導(dǎo)致在不同瀏覽器下，網(wǎng)站顯示的樣式不一樣，產(chǎn)生錯(cuò)位。

網(wǎng)站版面錯(cuò)位解決方法

• 如果網(wǎng)站只是在低版本IE瀏覽器下錯(cuò)位，其它瀏覽器下正常。說(shuō)明我們的網(wǎng)站代碼是沒(méi)有問(wèn)題的，是IE瀏覽器的原因造成的。解決這個(gè)問(wèn)題，只能對(duì)IE低版本瀏覽單獨(dú)寫樣式。如：{margin-left:5px;_margin-left:2px}，在屬性前面加個(gè)“_”。
• 如果網(wǎng)站在新版瀏覽器也出現(xiàn)錯(cuò)位，就要檢查一下自己的CSS中瀏覽器重置代碼有沒(méi)有寫好。以下分享一下學(xué)做網(wǎng)站論壇的瀏覽器兼容代碼：

  
  /* 重置瀏覽器樣式 */
  
  *{margin:0;padding:0;}
  
  html {color: #555;background: #F4F4F4;}
  
  body, button, input, select, textarea {font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";font-size: 14px;line-height: 1.7;word-wrap: break-word;}
  
  h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
  
  ul, ol{list-style: none;}
  
  table {border-collapse: collapse;border: 0;padding: 0;margin: 0;}
  
  img {border: 0;vertical-align: middle;}
  
  a {cursor: pointer; text-decoration:none;}
  
  a:link {color: #666;text-decoration: none;}
  
  a:visited {color: #666;text-decoration: none;}
  
  a:hover {color: #568ABE;text-decoration: underline;}
  
  a:active {color: #568ABE;text-decoration: none;}
  
  em, i {font-style: normal;font-weight: normal;}
  
  pre{white-space: normal;font-family: inherit;}
  
  

• 對(duì)于制作自適應(yīng)網(wǎng)站的學(xué)員來(lái)說(shuō)，最好使用BOOTSTRAP自適應(yīng)前端框架，可以很好的兼容各種瀏覽器。相關(guān)教程：自適應(yīng)手機(jī)網(wǎng)站制作課程

標(biāo)簽： 代碼 網(wǎng)站制作

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。