在上一篇文章中我们介绍了CSS Resets的内容,它可以让所有的浏览器都按统一的规则去解释CSS代码。
CSS3和HTML5有一套更复杂的、范围更广的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 */