css hack惯用手法
文章目录
- 什么是css hack？它是如何实现浏览器兼容处理的？
- 说明：
- 1. ```Eric Meryer ```的```reset.css```样式表，代码如下：
- 2. 对于```具有边框的元素的重置```，处理代码如下：
- 3. 对于```列表样式的重置```，Eric和YUI的hack方式分别是：
- 4. 对于```上标、下标、baseline 的重置```
- 5. 对于```表格的样式重置```
- 6. 对于```a链接```
- 7. 除了重置样式之外，```清除浮动```也很重要！
- 8. 附件：常见浏览器、厂商标识
什么是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 | 20110126License: 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- |
如有问题，欢迎留言建议和更正。
以上就是关于“ css hack的常用重置手法 ”的全部内容。
css hack惯用手法相关推荐
- [转]CSS hack大全详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
- 针对IE6\7\8\9\10浏览器的CSS hack大全详解
目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的大部分市场份额,版本从IE6到IE10,所有前段工作者都必须面对和解决多个IE浏览器对代码的兼容性问题.在很多情况下,我们需要专门针对IE写c ...
- 对ie6、ie7、ff兼容性的详细css hack介绍
这个毛病把我憋了好久了,最近到底找到了解决滴方式,通过偶测试系完整ok滴,和大伙儿共享. 以下为引佣: 如今偶大多数全是用!important来hack,关于ie6和firefox测试可以正常卖弄,可 ...
- 【总结】IE6，IE7，IE8，Firefox兼容的css hack 补充!
IE6,IE7,IE8,Firefox兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-co ...
- Google Chrome的CSS hack写法
Google自从2010年9月3日推出了浏览器Google Chrome,写前端效果的同志们又得辛苦了,现在就是个浏览器混乱的时代,自从Google混进来之后,就更混乱了. 不过还好Google用的是 ...
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...
- CSS HACK：IE6、IE7、IE8、Firefox兼容性问题解决方案
CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案 参考文章: (1)CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案 (2)https://www. ...
- 转载：CSS hack技巧大全
原文地址:http://www.duitang.com/static/csshack.html part2 -- CSS hack技巧大全 --作者:吴雷君 兼容范围: IE:6.0+,FireFox ...
- IE8 CSS hack
IE8正式版出来有一段日子了,但是针对ie8正式版的CSS hack却很少,其实这是值得庆幸的,因为ie8修复了很多IE6和IE7的一些BUG,更加接近W3C标准. 针对IE8正式版的CSS hack ...
最新文章
- Java 集合框架（二）—— ArrayList
- eclipse 工程复制
- rsync+inotify一键安装脚本
- 再回首数据结构—链表
- 查服务器的作用有哪些,云服务器优点和功能有哪些，可以看看这些或许你会明白...
- How To: Team Build 自定义版本号
- 如何快速实现高并发短文检索-转
- POJ值得做的题目（一）
- Linux下的signal信号机制
- 【C++基础之十一】虚函数的用法
- html转word 图片丢失 java_Java 实现 Word 转 pdf 文档的工具来了
- Windows安装Nacos单机集群
- 线段树专辑—— pku 3468 A Simple Problem with Integers
- 《孤勇者》matlab版，用matlab弹奏《孤勇者》
- 前端模块打包工具--webpack
- 10分钟免费邮箱：10minutemail
- linux rescue u盘,linux 0-rescue
- Html中a标签用法总结：创建email，电话，描点链接等。以及防止链接被搜索引擎收录
- Android App设计架构
- 2天，我把MySQL索引、锁、事务、分库分表撸干净了！