零基础建站培训教程介绍

当前位置:

网站版面错位怎么解决

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

网站版面错位

网站版面错位的原因

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  1. SEO软件安装及使用方法
  2. 网页设计学习必备:中文颜色名称对照表
  3. 如何在网站添加“运行代码”功能
  4. 网页设计师需要学习哪些知识和软件
  5. 如何实现animate动画滑动加载网页
  6. 网站Form表单实现提交发送到邮箱
  7. ps安装后出现”不能完成要求,因为注册信息丢失或无效”解决方法
  8. CSS3控制图片自适应屏幕大小和居中显示
  9. 一个网站空间怎么同时建二个以上网站
  10. 电影视频网站如何设置登录后可看
学做网站论坛零基础学建网站课程