zoukankan      html  css  js  c++  java
  • 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;
    }
    
  • 相关阅读:
    搭建个人Spring-Initializr服务器
    “不蒜子”统计总访问人数脚本
    基于Hazelcast及Kafka实现的分布式锁与集群负载均衡
    虚拟机部署hadoop集群
    程序员、黑客及开发者之间的区别
    今日校园自动登录教程
    逆向DES算法
    来自穷逼对HttpCanary的蹂躏
    今日校园提交签到和查寝-Java实现
    JS 判断数据类型方法
  • 原文地址:https://www.cnblogs.com/lanyueer/p/1992286.html
Copyright © 2011-2022 走看看