零基础建站培训介绍

当前位置:

网站版面错位怎么解决

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

网站版面错位

网站版面错位的原因

  • 对于一些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自适应前端框架,可以很好的兼容各种浏览器。相关教程:自适应手机网站制作课程

发表评论

零基础学建站就到学做网站论坛