css常用hack
原文地址: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的更多相关文章
- CSS常用Hack集合(adding)
1> IE9 and IE10 @media screen and (min-width: 0\0) { .p-form input.p-value[type="checkbox&qu ...
- 【10】css hack原理及常用hack
[10]css hack原理及常用hack 原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式.常见的hack有1)属性hack.2)选择器hack.3)IE条件注释 IE条件注 ...
- 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明
自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...
- 关于css的hack问题
<!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> 取值: <keywords> ...
- 前端学习 -- Html&Css -- 条件Hack 和属性Hack
条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...
- css常用代码大全以及css兼容(转载)
css常见的快捷开发代码汇总(长期更新),包括CSS3代码,有一些css效果很顽固,经常会一时找不出解决方案,网络上也有很多的工具和高手提供了具体的浏览器兼容代码,这个页面我今后会经常整理,希望能够帮 ...
- css中hack是什么
css中hack是什么 一.总结 1.CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览 ...
- css条件Hack属性
<!--[if IE]> <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
随机推荐
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- node服务的监控预警系统架构
需求背景 目前node端的服务逐渐成熟,在不少公司内部也开始承担业务处理或者视图渲染工作.不同于个人开发的简单服务器,企业级的node服务要求更为苛刻: 高稳定性.高可靠性.鲁棒性以及直观的监控和报警 ...
- 聊聊Unity项目管理的那些事:Git-flow和Unity
0x00 前言 目前所在的团队实行敏捷开发已经有了一段时间了.敏捷开发中重要的一个话题便是如何对项目进行恰当的版本管理.项目从最初使用svn到之后的Git One Track策略再到现在的GitFlo ...
- CRC、反码求和校验 原理分析
3月份开始从客户端转后台,算是幸运的进入全栈工程师的修炼阶段.这段时间一边是老项目的客户端加服务器两边的维护和交接,一边是新项目加加加班赶工,期间最长经历了连续工作三天只睡了四五个小时的煎熬,人生也算 ...
- C语言 · 4_2找公倍数
问题描述 这里写问题描述. 打印出1-1000所有11和17的公倍数. 样例输入 一个满足题目要求的输入范例.例:无 样例输出 与上面的样例输入对应的输出.例: 代码如下: #include< ...
- Xcode模拟器启动不了,修复ios模拟器
1.如果可以重置模拟器 首先试试重置模拟器 2.如果不能重置,可以选择使用如下命令杀死模拟器服务: killall -9 com.apple.CoreSimulator.CoreSimulatorSe ...
- MVC Core 网站开发(Ninesky) 2、栏目
栏目是网站的常用功能,按照惯例栏目分常规栏目,单页栏目,链接栏目三种类型,这次主要做添加栏目控制器和栏目模型两个内容,控制器这里会用到特性路由,模型放入业务逻辑层中(网站计划分数据访问.业务逻辑和We ...
- dagger2系列之依赖方式dependencies、包含方式(从属方式)SubComponent
本篇是实战文章,从代码的角度分析这两种方式.本文参考自下列文章: http://www.jianshu.com/p/1d42d2e6f4a5 http://www.jianshu.com/p/94d4 ...
- Android之使用Bundle进行IPC
一.Bundle进行IPC介绍 四大组件中的三大组件(Activity.Service.Receiver)都是支持在Intent中传递Bundle数据的,由于Bundle实现了Parcelable接口 ...