针对不同的浏览器去写不同的 CSS, 让它能够同时兼容不同的浏览器, 能在不同的浏览器中也能得到我们想要的页面效果. 这个针对不同的浏览器写不同的 CSS code 的过程, 就叫 CSS hack, 也叫写 CSS hack. 下面为各位介绍一些 CSS hack 的技巧.
实例讲解:
Hack 应用情境(一)
适用范围: IE:6.0,IE7.0,IE8.0 之间的兼容
实例说明: 此例中我们使用了渐进识别的方式, 从总体中逐渐排除局部. 首先, 巧妙的使用 "\9" 这一标记, 将 IE 游览器从所有情况中分离出来. 接着, 再次使用 "+" 将 IE8 和 IE7,IE6 分离开来, 此时, 我们的 IE8 已经独立识别.
实例代码:
- .bb{
- height:32px;
- background-color:#f1ee18;/* 所有识别 */
- .background-color:#00deff\9; /*IE6,7,8 识别 */
- +background-color:#a200ff;/*IE6,7 识别 */
- _background-color:#1e0bd1;/*IE6 识别 */
- }
- /* 一个用于展示的 class 为 bb 的 div 标签 */
- <div class ="bb"></div>
Hack 应用情境(二)
适用范围: IE:6.0,IE7.0,IE8.0,Firefox 之间的兼容 (相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
实例说明: 大家很容易的可以看出这是情境 (一) 的加强版, 适用于更广泛的环境. 其实情境 (一) 中也已经做到了把火狐与 IE 游览器区分开来了, 现在我们要做的是把火狐从其它游览器中再次识别出来.
大家仔细看下代码, 大家会发现其实游览器识别是很简单的. 火狐如何识别? 对了, IE 中对伪类支持不广泛, 所以伪类是个不错的途径.(.yourClass,x:-moz-any-link, x:default) .
注意, 这个区分伪类往往 IE7 也能识别, 所以最好还需要把 IE7 单独识别出来, 且此方法对 ff3.6 已无效, Firefox 的区分可以使用 @-moz-document url-prefix(){}
实例代码:
- .bb{
- height:32px;
- background-color:#f1ee18;/* 所有识别 */
- background-color:#00deff\9; /*IE6,7,8 识别 */
- +background-color:#a200ff;/*IE6,7 识别 */
- _background-color:#1e0bd1;/*IE6 识别 */
- }
- .bb, x:-moz-any-link, x:default{
- background-color:#00ff00;}/*IE7 firefox3.5 及以下 识别 */
- @-moz-document url-prefix(){.bb{background-color:#00ff00;}}/* 仅 Firefox 识别 */
- * +HTML .bb{background-color:#a200ff;}/* 仅 IE7 识别 */
- /* 一个用于展示的 class 为 bb 的 div 标签 */
- <div class ="bb"></div>
Hack 应用情境(三)
适用范围: IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之间的兼容
实例说明: 我们现在将再次对我们的 CSS 进行加强了, 使其能识别 Safari(Chrome)游览器. 这是基于它们的内核 webkit 来识别的, 用法为 @media screen and (-webkit-min-device-pixel-ratio:0)
实例代码:
- .bb{
- height:32px;
- background-color:#f1ee18;/* 所有识别 */
- background-color:#00deff\9; /*IE6,7,8 识别 */
- +background-color:#a200ff;/*IE6,7 识别 */
- _background-color:#1e0bd1;/*IE6 识别 */
- }
- @media screen and (
- -webkit-min-device-pixel-ratio:0){
- .bb{
- background-color:#f1ee18
- }
- }{
- } /*Safari(Chrome) 有效 */
- .bb, x:-moz-any-link, x:default{
- background-color:#00ff00;
- }/*IE7 firefox3.5 及以下 识别 */
- @-moz-document url-prefix(){
- .bb{
- background-color:#00ff00;
- }
- }/* 仅 Firefox 识别 */
- * +HTML .bb{
- background-color:#a200ff;
- }/* 仅 IE7 识别 */
- /* 一个用于展示的 class 为 bb 的 div 标签 */
- <div class ="bb"></div>
本文来自 css3 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/15301.html