原文地址:css常用hack

突然想起今天早上在CNZZ看到的统计数据,使用IE6、7的用户比例还真多,看到之后我的心都碎了。微软都放弃了为毛还有这么多人不死心?

所以说,IE下的兼容还是得做的。 –,–

css hack分为3种,即属性hack,IE条件注释hack,CSS选择器Hack

1、属性hack

对于这个我只想说网上各种答案都有,只知道复制粘贴,好多错误,测试一下不就知道了。

.myClass{
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9;/*IE6、7、8、9、10识别,但是IE11不支持,亲测*/
background-color:#00deff\0;/*IE8、9、10、11识别,据说还有opera*/
background-color:#00deff\9\0;/*IE8、9、10识别*/
+background-color:#a200ff;/*IE6、7识别*/
*background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

  

这里要注意的一点用法是在IE6下,

.myClass{
background:red!important;
background:green;
}

  

那么,会显示绿色green。如果我这样子写呢?

.myClass{
background:green;
background:red!important;
}

  

那么你会发现显示的背景为红色,亲测。那就说明,IE6不认识important了吗?当然是错的,

h1{
background: red!important;
}
h1{
background: green;
}

  

你会发现上面的样式在IE6下会显示红色,如果不认识,应该是绿色才对。

2、条件注释hack

<!--[if ie ]>

<![endif]-->

<!--当然用到的还有lt,gt,lte,gte,!-->

  

3、选择器hack

说到选择器的hack,那真的是有很多很多了,

对于属性选择器,IE6都是不支持的,但IE7及以上是支持的

[attr*=val]//多个值

[attr^=val]

[attr$=val]

[attr~=val]//值之间有空格

  

还有兄弟选择器,IE6都是不支持的,但IE7及以上是支持的

p + h1 //h1在p的后面相邻,二者有相同的父元素

p ~ h1 //所有在p的后面的h1都会选择出来

  

再比如,最常用的伪类

:after

:before

IE8及以上支持,亲测。

对于css3的::after和::before伪元素与此伪类一直混淆不清,只知道IE9及以上才支持。

最后当然就是css3的一些伪类选择器了,只有IE9及以上才支持,似乎css3的伪类选择器都只有IE9及以上才支持。

:root

:nth-child(n)

:nth-of-type(n)

详细可以参照官方文档

还可以参考这篇文章

css常用hack的更多相关文章

  1. CSS常用Hack集合(adding)

    1> IE9 and IE10 @media screen and (min-width: 0\0) { .p-form input.p-value[type="checkbox&qu ...

  2. 【10】css hack原理及常用hack

    [10]css hack原理及常用hack 原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式.常见的hack有1)属性hack.2)选择器hack.3)IE条件注释 IE条件注 ...

  3. 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明

    自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...

  4. 关于css的hack问题

    <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> 取值: <keywords> ...

  5. 前端学习 -- Html&Css -- 条件Hack 和属性Hack

    条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...

  6. css常用代码大全以及css兼容(转载)

    css常见的快捷开发代码汇总(长期更新),包括CSS3代码,有一些css效果很顽固,经常会一时找不出解决方案,网络上也有很多的工具和高手提供了具体的浏览器兼容代码,这个页面我今后会经常整理,希望能够帮 ...

  7. css中hack是什么

    css中hack是什么 一.总结 1.CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览 ...

  8. css条件Hack属性

    <!--[if IE]> <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

随机推荐

  1. Hangfire项目实践分享

    Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...

  2. .NET 串口通信

    这段时间做了一个和硬件设备通信的小项目,涉及到扫描头.输送线.称重机.贴标机等硬件.和各设备之间通信使用的是串口或网络(Socket)的方式.扫描头和贴标机使用的网络通信,输送线和称重机使用的是串口通 ...

  3. LeetCode 7. Reverse Integer

    Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return -321 Have you ...

  4. 【走过巨坑】android studio对于jni调用及运行闪退无法加载库的问题解决方案

    相信很多小伙伴都在android开发中遇到调用jni的各种巨坑,因为我们不得不在很多地方用到第三方库so文件,然而第三方官方通常都只会给出ADT环境下的集成方式,而谷歌亲儿子android studi ...

  5. win10上部署Hadoop-2.7.3——非Cygwin、非虚拟机

    开始接触Hadoop,听人说一般都是在Lunix下部署Hadoop,但是本人Lunix不是很了解,所以Google以下如何在Win10下安装Hadoop(之后再在Lunix下弄),找到不少文章,以下是 ...

  6. Android MVP+Retrofit+RxJava实践小结

    关于MVP.Retrofit.RxJava,之前已经分别做了分享,如果您还没有阅读过,可以猛戳: 1.Android MVP 实例 2.Android Retrofit 2.0使用 3.RxJava ...

  7. AFN解析器里的坑

    AFN框架是用来用来发送网络请求的,它的好处是可以自动给你解析JSON数据,还可以发送带参数的请求AFN框架还可以监测当前的网络状态,还支持HTTPS请求,分别对用的类为AFNetworkReacha ...

  8. SEED实验系列文章目录

    美国雪城大学SEEDLabs实验列表 SEEDLabs是一套完整的信息安全实验,涵盖本科信息安全教学中的大部分基本原理.项目组2002年由杜文亮教授创建,目前开发了30个实验,几百所大学已采用.实验楼 ...

  9. VPN连接常见错误汇总

    提示远程服务器没有响应. 这种情况有两种情况,一种是远程服务器出现故障.另一种是自己的电脑出现问题,具体原因我还没有找到,但是可以肯定的是注册表除了问题,一个终极的解决办法就是把注册表替换了.先将HK ...

  10. Spring Quartz实现任务调度

    任务调度 在企业级应用中,经常会制定一些"计划任务",即在某个时间点做某件事情 核心是以时间为关注点,即在一个特定的时间点,系统执行指定的一个操作 任务调度涉及多线程并发.线程池维 ...