CSS HACK 如何书写
什么是css hank
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
css hank的类型
有三种表现形式,css属性前缀法,选择器前缀法,以及IE条件注释法。
css属性前缀法
IE6+ css hack:
Selector { _property: value; }
IE7+ css hack:
Selector { *+property: value; }
IE8+ css hack:
Selector { property: value\0; }
IE9+ css hack:
Selector { property: value\9\0; }
选择器前缀法:
是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
目前最常见的是
html 前缀只对IE6生效
+html +前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
IE条件注释法:
<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if IE 6]> 仅IE6可识别 <![endif]–>
<!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
CSS HACK 如何书写的更多相关文章
- CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法
css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px; /*ff的属性*/margin-bottom:140px\9; /* IE6 ...
- CSS hack方式一览【转】
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- Web前端技术研究:Css hack技术---令人沮丧的技术
我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- css样式 --- CSS hack
前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一 ...
- 史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- [转]史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- CSS Hack相关知识
CSS Hack 1.由于不同厂商的浏览器,比如Internet Explorer,Safari,Chrome,Mozila Firefox等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对C ...
- 转 CSS hack:针对IE6,IE7,firefox显示不同效果
CSS hack:针对IE6,IE7,firefox显示不同效果 做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要. 区别不同浏览器的CSS hack写法: 区别IE6与FF: ...
随机推荐
- 【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight
做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...
- Redis缓存穿透、缓存雪崩和缓存击穿理解
1.缓存穿透(不存在的商品访问数据造成压力) 缓存穿透,是指查询一个数据库一定不存在的数据.正常的使用缓存流程大致是,数据查询先进行缓存查询,如果key不存在或者key已经过期,再对数据库进行查询,并 ...
- linux文件权限总结(创建root不可以删除文件、只可追加的日志文件等)
文件类型 对于文件和目录的访问权力是根据读访问,写访问,和执行访问来定义的. 我们来看一下 ls 命令的输出结果 [root@iZ28dr6w0qvZ test]# ls -l 总用量 72 -rw- ...
- 简述private,protected,public,internal修饰符的访问权限
private:私有成员,在类的内部才可以访问 protected:保护成员,在类的内部和继承类中可以访问 public:公共成员,完全公开,没有访问限制 internal:当前程序集内可以访问
- CesiumJS 添加会动的GIF
由于Cesium使用canvas渲染,如果使用billboard等加载gif图片只能渲染第一帧,导致动图不动.在Cesium的官方示例中找到一段代码可将HTML元素渲染到地图上,将gif以html元素 ...
- 分享 Xamarin.android 关于使用SQLiteOpenHelper的小白经验
关于使用SQLiteOpenHelper的使用,对于小白的我,百度啦相当多的大神的介绍,均未能让我这新手(零基础)成功学会,参考了http://www.cnblogs.com/yaozhenfa/p/ ...
- sublime实现markdown浏览器预览
效果预览 实现 首先下载插件OmniMarkupPreviewer 方法:ctrl + shift + P 安装完成后搜索'OmniMarkupPreviewer'双击即可 下载完成后新建.md文件 ...
- 广州 office365的开发者训练营交流活动简报
2018年10月13日,在 微软广州办公室(广州市天河区太古汇1座28层微软广州办公室) 成功举办了office365的开发者训练营,本活动在微软官网的地址: https://www.microsof ...
- SQL注入攻击的常见方式及测试方法
本文主要针对SQL注入的含义.以及如何进行SQL注入和如何预防SQL注入让小伙伴有个了解.适用的人群主要是测试人员,了解如何进行SQL注入,可以帮助我们测试登录.发布等模块的SQL攻击漏洞,至于如何预 ...
- EL表达式 if 和 if else语句的写法
JavaScript的if else大家都不会陌生,但可能很多小伙伴并不知道在jsp文件里,el表达式的if else是怎么写的,下面安利给各位小伙伴 el表达式 if 代码示例 <c:if t ...