之前在很多地方看到css hack,今天狠下心,看看到底是什么鬼,所有我去百度了,然后看了一篇文章,然后写个小总结。

css hack就是通过加一些特定的符号,不同的浏览器可以识别特定符号的样式,以此达到在不同的浏览器下面,可以看到不同的css样式。

1.大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safari不支持 (opera可识别除外)。
2.\9    :所有IE浏览器都支持
3._和- :仅IE6支持
4.*     :IE6、E7支持
5.\0    :IE8、IE9支持,opera部分支持
6.\9\0 :IE8部分支持、IE9支持
7.\0\9 :IE8、IE9支持

各种CSS hack情况介绍

1.区别IE和非IE浏览器

#tip{
background:blue;/*非IE背景蓝色 因为所有浏览器都能解释*/
background:red\9;/*IE6、IE7、IE8、IE9背景紅色 因为\9在IE6.7.8.9中可以识别,覆盖上面样式 IE10跟11应该不识别,IE11测试确定*/
}

2.区别IE6、IE7(方法1)

#tip{
*background:black;/*IE7背景变黑色*/
_background:orange;/*IE6背景变橘色*/
}

3.区别IE6、IE7(方法2)

#tip{
background:black!important;/*IE7背景变黑色*/
background:orange;/*IE6背景变橘色*/
}

IE浏览器下hack总结

element{
color:#666\9; //IE8 IE9
*color:#999; //IE7
_color:#EBEBEB; //IE6
}

可以看出,利用字符识别无法区分IE8和IE9,我们可以从伪类的识别来区分

element{
color:#666\9; //IE8
*color:#999; //IE7
_color:#EBEBEB; //IE6
}
:root element{color:#666\9;}//IE9

【说明】:“:root”伪类IE系列只有IE9支持,其他主流浏览器均支持,利用这一点来区分IE8和IE9。另外考虑到opera部分支持,完全支持:root,所以不使用。

兼容各大主流浏览器(最新版本)css hack汇总如下(最全的):

.element{
color:#000; /*w3c标准*/
[;color:#f00;]; /*Webkit(chrome和safari)*/
color:#666\9; /*IE8*/
*color:#999; /*IE7*/
_color:#333; /*IE6*/
}
:root .element{color:#0f0\9;} /*IE9*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (
-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}} /*opera*/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/

说说css hack,说真的,我也是才去了解这个东西的更多相关文章

  1. 今天才知道css hack是什么

    先来个冷笑话:一晚下班回家,一民警迎面巡逻而来.突然对我大喊:站住! 民警:int类型占几个字节? 我:4个. 民警:你可以走了. 我感到很诧异. 我:为什么问这样的问题? 民警:深夜还在街上走,寒酸 ...

  2. 【荐】说说CSS Hack 和向后兼容

    人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...

  3. CSS hack方式一览【转】

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  4. Web前端技术研究:Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  5. CSS hack前传——背景图片全屏

    在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...

  6. 史上最全的CSS hack方式一览

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  7. [转]史上最全的CSS hack方式一览

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  8. 转 CSS hack:针对IE6,IE7,firefox显示不同效果

    CSS hack:针对IE6,IE7,firefox显示不同效果 做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要. 区别不同浏览器的CSS hack写法: 区别IE6与FF:  ...

  9. CSS Hack(转)

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

随机推荐

  1. appStore上传苹果应用程序软件发布

    首先确定帐号是否能发布, https://developer.apple.com/account,如果你打开Provisioning Portal,然后点击DisTribution(1)图中加号是灰色 ...

  2. SQL-W3School-基础:SQL AND & OR 运算符

    ylbtech-SQL-W3School-基础:SQL AND & OR 运算符 1.返回顶部 1. AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤. AND 和 OR 运算符 ...

  3. Flask 静态文件缓存问题

    大家好,今天才发现很多学习Flask的小伙伴都有这么一个问题,清理缓存好麻烦啊,今天就教大家怎么解决. 大家在使用Flask静态文件的时候,每次更新,发现CSS或是Js或者其他的文件不会更新. 这是因 ...

  4. 智能指针-共享式shared_ptr

    #include <iostream>#include <string>#include <vector>#include <memory> using ...

  5. 2019最新 Java商城秒杀系统的设计与实战视频教程(SpringBoot版)_2-2微服务项目的搭建-SpringBoot搭建多模块项目二

    一些重要的配置文件直接复制过来了 jdbc和shiro的配置 application.properties里面的相关配置项的含义 日志界别的配置 数据返回到前端的json的配置 数据源的配置 需要新建 ...

  6. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_23-页面预览-页面预览开发

    1.用户进入cms前端,点击“页面预览”在浏览器请求cms页面预览链接. 2.cms根据页面id查询DataUrl并远程请求DataUrl获取数据模型. 3.cms根据页面id查询页面模板内容 4.c ...

  7. Java HttpClient Post请求参数格式为XML

    1.最近忙着做一个接口,拿到文档的时候,what?我当时就震惊了,全都是XML数据传输. 我当时就懵了,哎没得办法,在暑假传输这方面笔者比较熟练json格式数据,简单易懂啊 那就学呗. 2.我在使用的 ...

  8. 针对thinkphp 5框架存储过程bug而重写的存储过程的扩展类

    近期用tp5框架调取存储过程发现有bug,借鉴了一些官方的函数.以及找了个mysqli的类把存储过程重新写了个扩展类,下面两个类直接放置项目extend目录的stored(这个文件夹名称请按个人习惯命 ...

  9. 联想拯救者电脑装Ubuntu没有WIFI

    最近给联想电脑装Ubuntu系统,但是装完之后总是无法启动WIFI,而宽带上网却可以,给出一个解决办法,但是该办法应该只适合联想电脑,其他电脑请自测! 打开终端,输入下面指令: sudo modpro ...

  10. mysql学习笔记11_18(更新、插入和删除)

    1.初始表 mysql> select * from department; 2.修改销售部的地点为杭州 mysql> update department set address = '杭 ...