• CSS Reset


    因为需求改了,对界面进行了修改,原来的界面开始出现了不对齐,这样给客户可是用提体验不好啊,这是一眼就能看出来的东西,于是,笔者开始改CSS样式,在360浏览器里把样式调好以后,再打开FireFox看时,发现在360已经调好的界面在FF居然又不同了,以下是对比。

    同样的代码,但是在不同的浏览器下出现不同的显示:“交易中心开展岗位竞聘活动”的下面要和“中标公示”模块以及右边的模块的下面对齐,这里已经对齐了,

    再看在FF中的显示

    看到了吧,太明显的区别了。。那怎么办了,既然在不同的浏览器里显示效果也不一样,那笔者判定,这就是浏览器兼容的问题了。

    上百度搜了下“浏览器兼容”,寻找解决方案,

    其中一种解决方案叫“使用 CSS 清零”:

    使用 CSS 清零(CSS Reset)是实现跨浏览器兼容的灵丹妙药,CSS 清零可以消除不同浏览器对 margin,padding 这些属性的默认表现,你可以更容易控制诸如对齐,间隙等等问题。推荐使用 Eric Meyer’s CSS 清零代码。Eric Meyer 的 CSS清零代码,代码如下:

    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
    
    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, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
  • 相关阅读:
    QQ第三方登录(二)
    QQ第三方登录(一)
    Nginx防盗链
    TP-网页静态化
    TP5实现邮件发送(PHP 利用QQ邮箱发送邮件「PHPMailer」)
    docker安装elasticsearch和head插件
    git的安装方法
    ELK elasticsearch 因磁盘爆满导致无法 FORBIDDEN/12/index read-only / allow delete (api)
    vmware 系统网络发生变化后,本机安装的vmware无法通过客户端工具连接上的问题解决
    docker 容器视图工具portainer简单使用记录
  • 原文地址:https://www.cnblogs.com/lanyueer/p/1992286.html
Copyright © 2020-2023  润新知