当前位置主页 > 资料库 > 前端教程 > CSS3和HTML5样式表重置

CSS3和HTML5样式表重置

01-15

在上一篇文章中我们介绍了CSS Resets的内容,它可以让所有的浏览器都按统一的规则去解释CSS代码。

CSS3HTML5有一套更复杂的、范围更广的CSS样式表重置规则。由于老的浏览器不知道如何显示新的HTML5标签,于是默认将它们显示为inline元素。新的浏览器会将某些input显示为它自定义的外观(例如Safari浏览器会给html5的搜索框一个独特的外观,除非你知道如何使用正确的浏览器厂商前缀来处理它)

下面的一组CSS样式表重置规则用于解决大多数的跨浏览器问题。每一行代码都做了注释,你可以选择你需要的代码来使用它。

/* CSS 1,2 & 3 and HTML5 reset stylesheet */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* 重置所有元素的盒模型 */

img { border: 0; }
/* 去除图像的边框 (不能使用通配符选择器, 因为这样做会使表单元素消失) */

html, body { min-height: 100%; font-size: 62.5%; }
/* 设置浏览器body的高度, 使背景图像和DIV的高度能正确显示. Also sets em and rem units to exactly 10px, making sizing easier */

body, ul, ol, dl { margin: 0; }
/* 设置body和列表元素的margin,使它们在所有的浏览器中都从相同的位置开始 */

textarea { resize: vertical; }
/* changes textarea resizing from "both" (UA default) to vertical only */

/*  HTML5 CSS */
article, aside, audio, footer, header, nav, section, video { display: block }
/* 对于老的浏览器,如Firefox 3.6,由于不知道HTML5元素而将它们渲染为 display: inline 。这里不用管 date, figure和HTML5表单的input*/

input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : 0px; }
/* 在Firefox浏览器中使用表单元素时,去除聚焦按钮的内边框效果 */

input[type="search"]{-webkit-appearance:textfield;}
input[type="submit"] { -webkit-appearance:none; }
/* 去除Safari 或 Mobile Safari浏览器的HTML5搜索框和提交按钮的 OS X外观 */

/* OPTIONAL - USEFUL LAYOUT CSS */
.right { float: right; margin-left: 2em; clear: right; }
.left { float: left; margin-right: 2em; clear: left; }
/* class shortcuts to floating any content left or right, e.g. <img src="x.jpg" class=right … />. Remember that you can use multiple classes so long as you put spaces between the class names: <img src="x.jpg" class="right other class" … /> */

table { border-collapse: collapse; }
th { background: #000; color: #fff; }
td { padding: 1em; border: 1px solid black; }
/* cleans up presentation of tables; reverses color of table header cells */       
                            
Previous:
上一篇:浅谈CSS Resets重置样式表
Next:
下一篇:SVG文件的手动优化
返回顶部