浏览器兼容问题讨论(1)

来源:互联网 发布:笔记本哪个防护软件好 编辑:程序博客网 时间:2024/05/17 22:21

        现今,每个人都在使用不同的浏览器。像Firefox,Safari,Chrome和Internet Explorer这些主流浏览器占据了98%的Internet市场,而其它一些较少为人所知的浏览器,比如Konqueror,依然有少量使用者。所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果,至少用户在使用FF和IE的时候要显示统一的效果!所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。但是在解决具体的问题之前我们可以使用一些方法排除排除大总分的问题,这里介绍两个相对来说好的方法.
1.CSS重置.就是在你的网站中加入重置CSS的样式代码。有多套CSS重置代码可以供你选择,但是Eric Meyer和Yahoo提供的CSS重置代码公认为是最权威的。
Eric Meyer的重置代码
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}
2.判断浏览器的类型是一个好方法,对于不同的浏览器显示不同的代码块甚至不同的网页是一个可行的方法。
 <script type="text/javascript">
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        if (window.ActiveXObject)
            Sys.ie = ua.match(/msie ([/d.]+)/)[1]
        else if (document.getBoxObjectFor)
            Sys.firefox = ua.match(/firefox//([/d.]+)/)[1]       
       
        //以下进行测试
        if(Sys.ie) document.write('IE: '+Sys.ie);
        if(Sys.firefox) document.write('Firefox: '+Sys.firefox);     
    </script>
脚本不多,但是可以通过这些找到相应浏览器所使用的内核,然后输出相应的代码块,这样我们只需要做两个类型的网页,在制作过程中考虑某一种浏览器的特性就行了。
当然,这只是一种大概的作法,真正要消除浏览器间的细节区别还是要针对不同的情况作不同的处理!

 

原创粉丝点击