什么是css hack?它是如何实现浏览器兼容处理的?
通俗的说,所谓css hack 指的是:为了解决不同浏览器对css解析的不同而采取的措施。
换句话说,也就是指:对不同浏览器机器不同版本对css解析后出现页面内容的兼容性差异处理。
这其中,大多数针对的是下面的几个常用浏览器的兼容问题:
- 解决IE6中浮动元素的margin双边距问题;
- 识别不同浏览器、ie浏览器不同版本的方法
- 透明图片与透明背景的设置方法
- css3滤镜、蒙版、模糊效果的实现
因为现在浏览器类型、同一浏览器版本众多,浏览器对应的默认样式也不尽相同。不同的浏览器,不同版本的浏览器,导致css的选择器默认的一些数值也不可能相同。
因此,本文章着重总结一下css hack的常用重置手法,并辅以代码示下,抛砖引玉,望对于初级开发者有所助益。
说明:
本文只是本人阅历不同书籍和个人开发,今天经验性总结一下CSS Hack惯用伎俩,可作为所有项目的使用的共性存在,抛砖引玉,点到为止,不做更多展示,而不同的项目也可有其个性,开发者可根据项目特性化需求自己定制。还有一些共性,不属于样式重置部分,但是同等重要!由此,可引申为CSS框架,只不过框架考虑的更多。
然而,为了让浏览器显示的都一致,可以通过重新定义标签样式的方法,以此覆盖浏览器的css默认属性。
而为了便于重复使用,经常需要把这部分勇于覆盖路蓝旗默认样式的css代码抽离出来,如此,便形成了css reset文件,可称为“重置文件”,命名:“reset.css”
目前比较流行的重置样式有:
Eric Meryer
和Yui
,另外Condensed Meyer Reset
简化Eric Meryer 的样式。
1. Eric Meryer
的reset.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;
}
参考上述代码,在YUI的reset中,重置了背景色为白色,而文字颜色为黑色。
一般不建议这么重置背景色!
以防止破坏用户的浏览器自定义的网页默认的背景色。
针对不同浏览器对具有内、外边距元素的设置不同,有一种极为简单通俗的办法,通过定义:
*{margin: 0; padding: 0;}
让所有元素的padding和margin都清空归零。
而在YUI 的reset中,却只把有内、外边距的元素样式清空归零,而且其他元素不动,
这样避免给一些无关元素带上不必要的样式,导致元素过多时的性能下降。
代码如下:
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,button,
textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
同理,
2. 对于具有边框的元素的重置
,处理代码如下:
fieldset,img {
border: 0;
}
abbr,acronym {
border: 0;
font-variant: normal;
}
3. 对于列表样式的重置
,Eric和YUI的hack方式分别是:
ol,ul{ | li{
list-style: none; | list-style:none;
} | }
前者比后者多了3个字节。但还是建议使用前者!
建议使用前者比较稳妥。波及元素更少,性能会更高一点!
4. 对于上标、下标、baseline 的重置
sup,sub{
font-size: 100%;
vertical-align: baseline;
}
5. 对于表格的样式重置
需要在html中设置cellspacing=0达到table重置效果,且设置caption、th不要居中。
table{
border-collapse: collapse;
border-spacing: 0;
}
caption,th{
text-align: left;
}
6. 对于a链接
YUI中没有采取样式重置,这里建议把链接的下划线重置归纳进来,对整体项目有统一的链接样式。
对于个别的链接元素,可以在后续的个性开发中设计。
a{
text-decoration: none;
}
:link, :visited{
text-decoration: none;
}
另外,在某些浏览器中, q 或 blockquote
前后会出现引号,严重影响页面美感和用户体验,可以重置为:
blockquote{
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after{
content: "";
content: none;
}
7. 除了重置样式之外,清除浮动
也很重要!
目前主要推荐放入.cleatfix
,虽然不属于重置,可放在布局中:
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
display: block;
}
/* Hides from IE-Mac */
*html .clearfix{
height: 1%;
}
.clearfix{
display: block;
}
/* End hide from IE-Mac */
8. 附件:常见浏览器、厂商标识
序号 | 浏览器名称 | 匹配内核或私有属性 |
---|---|---|
1 | Chrome | -webkit- |
2 | safari | -webkit- |
3 | Opera | -o- |
4 | IE | -ms- |
5 | Firefox | -moz- |
9. 页底,目录导航:
如有问题,欢迎留言建议和更正。
以上就是关于“ css hack的常用重置手法 ”的全部内容。