RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:9:00-18:00
业务分类
关闭右侧工具栏

黄浦网络分享:网站版面错位怎么解决

    我们做好网站之后,希望自己的网站在不同浏览器下显示都是正常的,但往往会出现在某些浏览器下显示正常,有些浏览器却出现网站版面错位的情况。如下图红框区域所示,左右两个灰色边框上下没有对齐。
    网站版面错位的原因
    对于一些IE老版浏览器,如IE6、IE7,对于网站样式文件CSS中的样式代码识别与新版浏览器有很多不同。例如CSS中margin属性,低版本的IE浏览器会显示双倍于我们设置的值,这样就很容易出现版面错位。
    网站的兼容性CSS样式没有写好,导致在不同浏览器下,网站显示的样式不一样,产生错位。
 
    网站版面错位解决方法
    如果网站只是在低版本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",arial,Verdana,sans-serif";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;}
 



上一篇:到底做一个什么样的网站才算是好网站?
下一篇:营销型网站与展示性网站的区别分析