网站版面错位怎么解决

由于用户使用浏览器不同，我们制作出网站之后，希望自己做网站在不同浏览器下显示都是正常的，但往往会出现在某些浏览器下显示正常，有些浏览器却出现网站版面错位的情况。

网站版面错位的原因

• 对于一些IE老版浏览器，如IE6、IE7,，对于网站样式文件CSS中的样式代码认识与新版浏览器有很多不同。例如CSS中margin属性，低版本的IE浏览器会显示双倍于我们设置的值，这样就很容易出现版面错位。
• 网站的兼容性CSS样式没有写好，导致在不同浏览器下，网站显示的样式不一样，产生错位。

网站版面错位解决方法

• 如果网站只是在低版本IE浏览器下错位，其它浏览器下正常。说明我们的网站代码是没有问题的，是IE浏览器的原因造成的。解决这个问题，只能对IE低版本浏览单独写样式。如：{margin-left:5px;_margin-left:2px}，在属性前面加个“_”。
• 如果网站在新版浏览器也出现错位，就要检查一下自己的CSS中浏览器重置代码有没有写好。以下分享一下学做网站论坛的浏览器兼容代码：

  
  /* 重置浏览器样式 */
  
  *{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;}
  
  

• 对于制作自适应网站的学员来说，特别好使用BOOTSTRAP自适应前端框架，可以很好的兼容各种浏览器。相关教程：自适应手机网站制作课程