零基础建站培训教程介绍

当前位置:

网站版面错位怎么解决

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

网站版面错位

网站版面错位的原因

  • 对于一些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. href=”#”与href=”javascript:void(0)”空链接区别
  2. 网站友情链接 分页显示 相关文章问题
  3. 【wordpress音乐插件】悬浮式WordPress音乐播放器插件
  4. 网站图片懒加载如何实现(LazyLoad按需加载)
  5. 淘宝APP账号配置
  6. id和class的区别有哪些
  7. 网站怎么启动GZIP压缩方法(DZ,WP网站开启)
  8. 网站好用的js框架有哪些,优缺点是什么
  9. 网页图片轮播幻灯片代码分享
  10. 网站空间FTP传输速度慢分析及解决
学做网站论坛零基础学建网站课程