针对normalize.css改进型模仿
时间:2014-07-22 18:11 来源: 我爱IT技术网 作者:山风
@charset "utf-8";
/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 显示定义
========================================================================== */
/*
* 纠正IE 6/7/8/9 和 Firefox 3没有定义的`block`元素.
* hgroup:
,IE9支持hgroup
* details: ...
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* 将inline元素(标准定义为`inline-block`)以`inline-block`方式显示在 IE 6/7/8/9 和 Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/*
* 没有设置controls属性的不显示 `audio`，不支持audio标签的浏览器不会被隐藏.
* 删除额外高度 in iOS 5 设备.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* 修正具有属性`hidden`的元素没有被隐藏的bug in IE 7/8/9, Firefox 3,和Safari 4.
* 已知问题: IE 6不支持.
*/
[hidden] {
display: none;
}
/* ==========================================================================
基础样式
========================================================================== */
/*
* 1. 统一浏览器的根字体大小.
* 2. 保证在小尺寸IOS设备上的字体比例
* 已知问题:如确实要让chrome显示少于12px的字还是要使用(-webkit-text-size-adjust: none;),不能为重要信息
*/
html {
font-size: 100%;
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/*
* 修正`textarea`的`font-family`与其他元素不同的bug
* 已知问题: Webkit textarea字体偏细
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/*
* 统一各浏览器body的外边距
* 经测试,IE7(margin:15px 10px),其余(margin:8px)
*/
body {
margin: 0;
}
/* ==========================================================================
链接
========================================================================== */
/*
* normalize.css项目组认为`outline` 在Chrome 和 其它浏览器之间的差异
* 实际上我在Chrome23.0.1271.64 m版本上测试已经不存在此问题,因此我将其省略
* 已知问题:键盘获取焦点后，Chrome的默认样式会在a上加橙色实线1px边框。
*/
/*a:focus {
outline: thin dotted;
}*/
/*
* 取消a点击后或鼠标滑过所产生的边线,提升可阅读性
* 带background的a,点击过后产生边线 in Opera,IE7/8;鼠标点击未放开时产生边线 Firefox16.0.2
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
印刷样式
========================================================================== */
/*
* 统一字体大小和外边距在 IE 6/7.
* 修正 `h1` 默认字体大小在 `section` 和 `article` 内会采用h2等同大小的bug ,此bug出现在Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
}
/*
* 修正缺少底部默认点线样式在 IE 6/7/8/9, Safari 5, and Chrome.
* abbr缩写，title一般为全写标识
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* 修正b,strong标签没有加粗字体的bug,Firefox 3+, Safari 4/5, and Chrome.
* 经测试，其实目前所有浏览器都有加粗样式的,包括IE6
* b标签用于粗体或强调，更强调的用strong标签
*/
b,
strong {
font-weight: 700;
}
/*
* IE7 (margin:auto 30pt) UA 样式进行修正.
* 标签使用:blockquote摘自外网的信息
*
...
*/
blockquote {
margin: 1em 40px;
}
/*
* 修正在Safari 5 and Chrome中没有默认设置为斜体的bug.
* dfn特殊术语或专有名词，通常以斜体显示
* Chrome版本 22.0.1229.94 m已修正，Safari 5.1.7依然存在bug
*/
dfn {
font-style: italic;
}
/*
* normalize.css项目组认为mark的默认样式在 IE 6/7/8/9的表现与其他浏览器会有差异.
* 经过测试，实际上不存在该问题，因此我将其省略
*/
/*mark {
background: #ff0;
color: #000;
}*/
/*
* 修正IE7下p,pre的外边距为0，与其他浏览器存差异的bug
*/
p,
pre {
margin: 1em 0;
}
/*
* 修正IE 6 和 Safari 4/5 和 Chrome设置的字体不一致的bug.
* code 包住代码，一般以等宽Courier字体显示
* kbd 包住键盘键入字符，一般以等宽字体显示
* pre 包住计算器源代码(如转义字符 < =》 '<')
* samp 包住从上下文抽取的字符，极少使用
* 已知问题：应用后，Safari,IE6比原来偏大(IE>Safari>Firefox=Opera=Chrome)
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/*
* 提升预格式化文本在所有浏览器的可阅读性.
* white-space: pre;令overflow:auto;也会在一行内显示完,因此我将其省略
* white-space: pre-wrap;会在宽度不够时换行,word-wrap: break-word;已经起到相同作用了,因此我将其省略
* break-word 英文不会断开，汉字数字可以断开,一字符串在余下行显示不完会另起一行
*/
pre {
/*white-space: pre;*/
/*white-space: pre-wrap;*/
word-wrap: break-word;
}
/*
* q的quotes在 IE 6/7不支持,为了让所有浏览器统一显示,索性将其屏蔽掉.
*/
q {
quotes: none;
}
/*
* 修正 `quotes` 属性在Safari 4中不支持,索性将其屏蔽掉.
* q { quotes: '"' '"' }屏蔽类似引号
*/
q:before,
q:after {
content: '';
content: none;
}
/*
* 统一small标签字体大小
*/
small {
font-size: 80%;
}
/*
* 避免 `sub` 和 `sup` 影响 `line-height`在所有浏览器.
* sub下标，sup上标
* 1.修正Safari,IE7行高影响问题(IE8依旧影响)
* 2.让sub下标，sup上标处不超出文字的上下端，提高对齐度
*/
sub,
sup {
font-size: 75%;
line-height: 0;/*1*/
position: relative;
vertical-align: baseline;/*2*/
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
列表
========================================================================== */
/*
* 修正外边距不一致(实际只有IE7无默认的外边距).
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
/*
*当dd嵌套在ul时，IE7反而出现多余空白，建议省略
dd {
margin: 0 0 0 40px;
}
*/
/*
* 修正标签的内边距不一致的问题在 IE 6/7,Opera11.60.
* 已知问题：
* menu[type="context"] Firefox隐藏
* menu互相嵌套时，点样式始终紧跟内容 in webkit，其余浏览器点定在最上级menu附近(嵌套的所有自己menu都设置padding:0)
* menu不设置padding-left，li默认点样式完全消失 in Opera11.60，IE7(添加padding-left之后显示少一个点 in IE7)
* menu下点位置与ul，ol嵌套li的点间距不一致(做hack解决)
*/
menu,
ol,
ul {
padding:0 0 0 40px;
}
/*
* IE 7的点位置与其他浏览器稍微偏下，normalize.css将其取消不显示解决之.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* ==========================================================================
植入内容
========================================================================== */
/*
* 1. 删除嵌套在a中img的外边框在IE 6/7/8/9 and Firefox 3.
* 2. 提升图片质量当在IE 7对图片进行缩放.[IE9已废弃]
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/*
* Corrects overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
图片
========================================================================== */
/*
* 取消浏览器默认外边距
,IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/* ==========================================================================
表单
========================================================================== */
/*
* 修正多余的外边距 IE 6/7.
*/
form {
margin: 0;
}
/*
* 定义统一 border, margin, padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/*
* 1. 修正legend颜色不继承父元素的bug在 IE 6/7/8/9.
* 2. 修正文本没有被包裹在fieldset边框中的bug 在 Firefox 3.
* 3. 修正在IE 6/7中legend的字体留有额外的左边距的bug.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/*
* 1. 修正字体大小在浏览器中不会被继承的bug.
* 2. 统一外边距
* 3. 提高各浏览器显示的一致性和更好的对其度.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/*
* normalize.css项目组认为Firefox 3+在其浏览器默认样式表中将`!important`应用到`input`的`line-height`值
* (Firefox16.0.2中button标签可以使用lineheight,input类button还是要通过设置height才能实现文本垂直居中,
* 两者设置的lineheight没有被`!important`所覆盖掉)【需要修进一步核实,jimvin】
*/
button,
input {
line-height: normal;
}
/*
* 1. 避免Android 4.0.*系统WebKit内核浏览器的bug,破坏原生`audio`和`video` 控件【input如何影响其他标签的?jimvin】
* 2. 修正input类button和button标签在iOS中不可点击的bug.
* 3. input类button和button标签的鼠标滑过效果统一为手指样式
* 4. 在不影响button的文本的基础上删除其两边的空白，只对IE7，其余IE版本以及其余浏览器没有做删除工作,所以我索性省略该css设置
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
/**overflow: visible;*/ /* 4 */
}
/*
* input和button被禁用时,鼠标样式由手指转为默认的样式.
*/
button[disabled],
input[disabled] {
cursor: default;
}
/*
* 1. 修正将padding累加到content-width的bug in IE 8/9.
* eg: with: 25px, padding: 3px, border: 2px =>content-width: 25px+3px*2= 31px;
* 2. 删除额外的 padding in IE 8/9.
* 3. 删除额外的 padding in IE 7.
* 已知Bug: 额外的 padding in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0px; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/*
* 1. 将input[type="search"]渲染成input[type="text"] in Safari 5 和 Chrome.
* 2. 将盒模型设置为 'content-box' 在 Safari 5 , Chrome
* box-sizing : content-box || border-box || inherit
* content-box : width = content-width =>可用于修正content-width被padding抵消的bug
* border-box : width = content-width + padding + border =>可用于修正将padding累加到content-width的bug
* Firefox,IE8: content-box; Chrome: border-box; Safari,IE7-: 不读padding
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/*
* 删除type为search的input的取消按钮 in Safari 5 and Chrome.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* 删除点击后产生的虚线框 in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. 删除纵向滚动条在 IE 6/7/8/9.
* 2. 提升在所有浏览器中的对齐度和可阅读性(让textarea与其他内联元素顶部对齐)
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
表格
========================================================================== */
/*
* 删除表格元素间的空白
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ==========================================================================
补充(针对Normalize.css)
author:jimvin
========================================================================== */
/*
* 删除点击后产生的虚线框 in IE.
*/
button,input{ outline:0;}
/*
* select高度大于默认值时,select往下掉在Firefox,提升对齐度
*/
select{
vertical-align:middle;
}
/*
* menu下点位置与ul,ol嵌套li的点间距不一致(做hack解决)
*/
@media screen and (-webkit-min-device-pixel-ratio:0){
menu{
padding:0 0 0 24px;/*Webkit*/
}
}
/*
*当dd嵌套在ul时(尽管不符合语法),IE7反而出现多余空白,所以我将其省略
dd {
margin: 0 0 0 40px;
}
*/
/*
* normalize.css项目组认为mark标签的默认样式在 IE 6/7/8/9中的默认样式与其他浏览器存在差异
* 实际上不存在该问题,可以省略该css
mark {
background: #ff0;
color: #000;
}
*/
/*
* 不包括select原因(word-break不起作用)
* 1.option在所有浏览器中都显示为一行，IE7/8 option始终继承select的宽度，不够就截取
* 2.当option有宽度,选中状态下会截取，非选中状态就还原,in Firefox
* word-wrap: break-word;单词始终完整在一行显示
* word-break权限比word-wrap权限更高(两者按需取其一，无需两个都写)
* 已知问题:word-break: break-all;Opera没有将单词断开
*/
p,span,a,h1,h2,h3,h4,h5,h6,attr,b,strong,blockquote,dfn,mark,pre,code,kbd,samp,q,small,input,textarea,table {
word-wrap: break-word;
}
/*
* 在不影响button的文本的基础上删除其两边的空白，只对IE7，其余IE版本以及其余浏览器没有做删除工作,所以我索性省略该css设置
*/
/*
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
*overflow: visible;
}
*/
/*
* normalize.css项目组认为`outline` 在Chrome 和 其它浏览器之间的差异
* 实际上我在Chrome23.0.1271.64 m版本上测试已经不存在此问题,因此我将其省略
* 已知问题:键盘获取焦点后，Chrome的默认样式会在a上加橙色实线1px边框。
*/
/*a:focus {
outline: thin dotted;
}*/
/*
* 提升预格式化文本在所有浏览器的可阅读性.
* white-space: pre;令overflow:auto;也会在一行内显示完,因此我将其省略
* white-space: pre-wrap;会在宽度不够时换行,word-wrap: break-word;已经起到相同作用了,因此我将其省略
* break-word 英文不会断开，汉字数字可以断开,一字符串在余下行显示不完会另起一行
*/
/*
pre {
white-space: pre;
white-space: pre-wrap;
}
*/
/* ==========================================================================
补充(针对个人习惯)
author:jimvin
========================================================================== */
/*
* 1.ul在实际项目中绝大多数要重设margin
* 2.取消默认的左内边距起到li的list-style:none;的效果(实际项目经常要取消默认list-style样式)
*/
ul{
margin: 0; /* 1 */
padding: 0; /* 2 */
}
/*
* 三角
* 上.tri{border-width:10px;border-color:transparent transparent #000 transparent;border-style:dashed dashed solid dashed;}
* 下.tri{border-width:10px;border-color:#000 transparent transparent transparent;border-style:solid dashed dashed dashed;}
* 左.tri{border-width:10px;border-color:transparent transparent transparent #000;border-style:dashed dashed dashed solid;}
* 右.tri{border-width:10px;border-color:transparent #000 transparent transparent;border-style:dashed solid dashed dashed;}
*/
.tri{display:block; width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
/*
* 遮罩 1
* StartColorStr: aRGB(透明度,红,绿,蓝)
* 透明度(0-1)转化为16进制
* 在JS控制台运行Math.floor(0.5 * 255).toString(16)
* 已知问题:IE不能遮住遮罩下的元素(如果设计允许忽略此bug,应该使用遮罩 1的做法)
*/
/*
.shadow{
position:absolute;
left:0;
top:0;
width:100%;
z-index:110;
background-color:rgba(0, 0, 0, 0.5);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7c000000', EndColorStr='#7c000000');
}
*/
/*
* 遮罩 2
* 修正IE不能遮住遮罩下的元素bug
*
*
* .shadow,.shadowWrap,.shadowCnt三者一起配套使用,.shadowCnt将会根据具体设计而重设,这里只是给出默认的样式
*/
.shadow{position:absolute; left:0; top:0; width:100%; z-index:110; background:#000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8 */
filter: alpha(opacity=50);/* IE 5-7 */
-moz-opacity: 0.5;/* Netscape */
-khtml-opacity: 0.5;/* Safari 1.x */
opacity: 0.5;
}
.shadowWrap{position:absolute; left:0; top:0; z-index:110; width:100%;}
.shadowCnt{margin:100px auto; width:600px; background:#fff;}
本文来源 我爱IT技术网 http://www.52ij.com/jishu/12008.html 转载请保留链接。
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-