web前端规范之CSSHack[总结].pdfVIP

浏览器的阵型： 此文档将浏览器分为 IE 阵型和 Webkit 阵型。IE 阵型包括： 微软的 IE6 、IE7 、 IE8 、 IE9 ，国内在此内核扩展的 360 、搜狗、遨游、世界之窗、腾讯 TT 浏览器、瑞影、百度 浏览器、 瑞星浏览器、 糖果、GreenBrowser 、飞腾、 闪游、中易等。Webkit 阵型包括： Mozilla Friefox （Mozilla 开源组织）、 Chrome （google 公司）、 Safari （苹果公司）、 Oprea （挪威开 发商、中文翻译为 ,欧朋 ?）等等。 ! 国内外用户使用习惯： 由于微软 windows 操作系统（系统默认附带 IE浏览器）在中国大陆 的历史原因，目前国人使用的浏览器大部分都是 IE 内核的浏览器，包括： IE6 、 IE7 、 IE8 、 IE9 、360、搜狗、遨游、腾讯 TT 、世界之窗等。其中 360和搜狗的市场份额最大。可以这样 看，旧版本的国产浏览器是站在 IE 阵型的 （类似于java 和 .net阵型），但是现在的新版本的 国产浏览器，比如 360和遨游，它既有 IE 内核的特性，又兼顾了 Webkit 特性的 双重体验 。举 一个例子，新版遨游浏览器同样支持 CSS3的圆角和投影显示。在国外，由于版权意识等原 因，老外使用 Webkit 内核浏览器居多。最新数据显示， chrome 超越了 ie 的市场份额。 什么是 CSS Hack ？ 由于不同的浏览器，比如 IE 6 ，IE 7 ，Mozilla Firefox 等，对 CSS的解析认 识不一样，因此会导致生成的页面效果不一样，不同内核的浏览器之间页面效果存在差异。 这个时候我们就需要针对不同的浏览器去写 不同的 CSS ，让它能够同时兼容不同的浏览器， 能在不同的浏览器中实现页面效果的一致性。针对不同的浏览器写不同的 CSS Code的过程， 就叫 CSS hack。 我们写 ie 和 firefox 的css hack，可以认为，兼容火狐浏览器，一般情况 下都会兼容 chorme 、oprea、safari 浏览器。 firefox 和它们还是有细微的区别，如果 html 和css 结构规范，一般情况下还是可以认为：兼容 firefox ，即兼容了 chrome、 oprea、safari ，因为 它们是同一个阵型的。另 外， firefox3.5 以上的版本，和 ie8兼容性接近。 CSS Hack大致有 3种表现形式， CSS类内部 Hack、选择器 Hack 以及 HTML 头部引用 (if IE)Hack ， 主要针对 IE 内核和非 ie内核的浏览器。 类内部 Hack ：比如 IE6能识别下划线 _ 和星号 * ，IE7 能识别星号 * ，但不能识别下划 线_ ，而 firefox 两个都不能认识。 选择器 Hack ： 比如 IE6 能识别 *html .class{} ，IE7 能识别 *+html .class{} 或者 *:first-child+html .class{} 。 HTML 头部引用 Hack ：针对所有 IE ：，针对 IE6及以下版本：，这类 Hack 不仅对 CSS生效， 对写在判断语句里面的所有代码都会生效。 以下注释约定 FF 为 firefox ，CH为： chorme，OP为： oprea ，SF为： safari 。 常见的 CSS hack 写法大全： .newsList{ padding:10px; /* FF CH OP 都能识别 */ [padding:10px; padding:12px;]; /* SF, CH( 值取后者： padding ：8px) */ padding:9px\9; /* 所有 ie