元素默认样式显示问题

每个浏览器对不同元素都有自己的默认样式。Google Chrome 渲染正文标题、段落、列表等,与 IE 浏览器可能都有所不同。这就导致同一个页面元素在不同的浏览器中显示效果不一致,而有所差异。

什么是 CSS 重置技术

为确保跨浏览器兼容性,CSS 重置技术 已经广泛应用。

所谓 CSS 重置技术就是让每个常用的 HTML 元素采用一个预定义的样式并为所有浏览器提供一套统一的样式,通常包括去掉默认大小、内外边距或附加样式。

因为 CSS 是从顶到底层叠,所以 CSS 重置技术必须放在样式表最顶部,这样才不会被覆盖而失效。

如何使用 CSS 重置技术

目前最流行的是 Eric Meyer 的 CSS 重置样式,已经被新的 HTML5 元素采纳为默认样式。除此以外,还有 Nicolas Gallagher 的 Normalize。

浏览器输入:https://meyerweb.com/eric/tools/css/reset/ 复制 CSS Reset 代码

我已经复制 CSS Reset v2.0 版本代码,如下:

/* 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;
}

CSS 重置技术的更多相关文章

  1. Web前端技术研究:Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  2. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  3. CSS重置样式表

    网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...

  4. 用DIV+CSS切割多背景合并图片 CSS Sprites 技术

    很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...

  5. CSS sprites 技术

    Css Sprites 技术逐渐流行,各大网站上都可以看到它的身影. 但从本质上,Css Sprites 只是 Css 技术的一个使用小窍门,初学者也能快速上手. Css Sprites 简单解释: ...

  6. CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera

    转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...

  7. CSS开发框架技术OOCSS编写和管理CSS的方法

    目前最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似技术(如BEM).这些方法试图对CSS采用面向对象的编程原则.样式语言与面向对象的设计原则在概念之间存在一定的问题.欠缺经验的人员可能不会 ...

  8. CSS 重置默认样式

    1. 概述 1.1 说明 css重置样式主要是为了让各个浏览器的CSS样式有一个统一的基准,使HTML元素样式在跨浏览器时有一致性的效果. 备注:浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的 ...

  9. CSS Sprites (CSS 精灵) 技术

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

随机推荐

  1. PAT A1025 考生排名问题

    题目要求:有n个考场,每个考场有若干个考生,现给出各个考场中考生的准考证号与分数,按照分数从高到低排序,并按顺序输出所有考生的准考证号,排名,考场号以及所在的考场排名 #include<cstd ...

  2. 逆向初级-PE(五)

    5.1.PE文件结构 1.什么是可执行文件? 可执行文件(executable fle)指的是可以由操作系统进行加载执行的文件. 可执行文件的格式: Windows平台: PE(Portable Ex ...

  3. 《C标准库》学习笔记整理

    简介 <C标准库>书中对 C 标准库中的 15 个头文件的内容进行了详细的介绍,包括各头文件设计的背景知识.头文件中的内容.头文件中定义的函数和变量的使用.实现.测试等. 我学习此书的目的 ...

  4. Day14_79_IO+Properties联合应用

    IO+Properties联合应用 - dbinfo文件中可以存放<key=value> - 像dbinfo这样的文件我们叫做配置文件,配置文件的作用是使程序更加灵活 - 一般在程序中可变 ...

  5. 测试报告模板:HTMLTestRunner.py(新版)

    报告样式效果: 报告源码:HTMLTestRunner.py 1 """ 2 A TestRunner for use with the Python unit test ...

  6. 996. Number of Squareful Arrays

    Given an array A of non-negative integers, the array is squareful if for every pair of adjacent elem ...

  7. 展开说说,Spring Bean IOC、AOP 循环依赖

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 延迟满足能给你带来什么? 大学有四年时间,但几乎所有人都是临近毕业才发现找一份好工作 ...

  8. adb、adb shell am、adb shell pm命令的详细使用说明

    本文博客地址:http://blog.csdn.net/qq1084283172/article/details/64183248 1.在命令行终端执行下面的命令: adb >adb.txt 2 ...

  9. 编译Android内核 For nexus 5 以及绕过Android的反调试

    本文博客链接:http://blog.csdn.net/qq1084283172/article/details/54880488 前面的博客中已经记录了Nexus 5手机的Android 4.4.4 ...

  10. Apache Tomcat examples directory vulnerabilities(Apache Tomcat样例目录session操纵漏洞)复现

    目录 Session操控漏洞 示例: Session操控漏洞 在Apache tomcat中,有一个默认的example示例目录,该example目录中存着众多的样例,其中/examples/serv ...