IE css hack整理
CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozillafirefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack!
目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的大部分市场份额,版本从IE6到IE10,所有前段工作者都必须面对和解决多个ie浏览器对代码的兼容性问题。在很多情况下,我们需要专门针对IE写css样式,即针对IE的css hack,下面将详细介绍这些内容:
1、常见的特殊符号的应用:
IE6:
_selector{property:value;}
selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important
IE7:
+selector{property:value;}
IE8:
selector{property:value\0;}
IE6 & IE7:
*selector{property:value;}
IE6 & IE7 & IE8:
selector{property:value\9;}
总结起来,如下:
其中,S表示Standards Mode即标准模式,Q表示Quirks Mode,即兼容模式。
(了解更多Quirks模式、Strict(Standars)模式?)
hack | 示例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) |
* | *color | Yes | Yes | Yes | Yes | No | Yes |
+ | +color | Yes | Yes | Yes | Yes | No | Yes |
- | -color | Yes | Yes | No | No | No | No |
_ | _color | Yes | Yes | No | Yes | No | Yes |
# | #color | Yes | Yes | Yes | Yes | No | Yes |
\0 | color\0 | No | No | No | No | Yes | No |
\9 | color\9 | Yes | Yes | Yes | Yes | Yes | Yes |
!important |
color:blue !important; color:green; |
No | No | Yes | No | Yes | No |
2、条件注释语句(<!--[if IE]> <![endif]-->)
所有的IE可识别
仅IE6可识别
IE6以及IE6以上版本可识别
IE7以下版本可识别
lt 表示less than 当前条件版本以下的版本,不包含当前版本。
gte 表示greeter than or equal 当前版本以上版本,并包含当前版本。
lte 表示less than or equal 当前版本以下版本,并包含当前版本。
3、meta声明
由于IE8 可能会将页面按照 IE7 模式进行渲染,针对 多版本IE的现状,通常会采用设置 X-UA-Compatible HTTP 头的方式将页面在IE中采用统一的渲染模式。
//标准 IE7 模式
//兼容 IE7 模式
//标准 IE 模式
4、其他(/*\**/注释法)
网上也流传着这样一种ie hack方法
.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/
分析下:
各个浏览器都认识,这里给firefox用;
background-color:red\9;\9所有的ie浏览器可识别;
background-color:yellow\0; \0 是留给ie8的,但笔者测试,发现最新版opera也认识,汗。。。不过且慢,后面自有hack写了给opera认的,所以,\0我们就认为是给ie8留的;
+background-color:pink; + ie7定了;
_background-color:orange; _专门留给神奇的ie6;
:root #test { background-color:purple\9; } :root是给ie9的,网上流传了个版本是 :root #test { background-color:purple\0;},呃。。。这个。。。,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
好了就这么多了,特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题,但是毕竟不符合W3C规范,我们平时写css最好是按照标准来,这样对我们以后维护也是大有好处的,实在不行再用。
区别不同浏览器的CSS hack写法:
区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6 | IE7 | FF | |
* | √ | √ | × |
!important | × | √ | √ |
------------------------------------------------------
另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。
IE6 | IE7 | FF | |
* | √ | √ | × |
!important | × | √ | √ |
_ | √ | × | × |
于是大家还可以这样来区分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
转载于:https://www.cnblogs.com/hongchenok/p/3903568.html
IE css hack整理相关推荐
- css hack *html,HTML_CSS Hack整理,CSS Hack是在标准CSS没办法兼容 - phpStudy
CSS Hack整理 CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务. 我进行前端开发的时候 ...
- css hack *html,css hack 大全 各个浏览器的css
各个浏览器的css hack区别属性: IE6: _zoom:1; IE6/7: *zoom:1; IE6/7/8/9 :\9 各个浏览器的css hack区别规则 IE6: *html{} IE7: ...
- css 区分浏览器,CSS Hack大全-教你如何区分出浏览器的版本
今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSSHack综合的一起,写了一个小的浏览器测试器 现在的浏览器IE6- ...
- css hack技术整理
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- 史上最全的CSS hack方式一览(转)
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- css hack 学习总结
css hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是 同一厂商的浏览器的不同版本,如IE ...
- 一天搞定CSS(扩展):CSS Hack
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- 史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- [转]史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- 在网上找到一个CSS hack列表,记录在这里以分析css的浏览器兼容性
另外摘抄一份目前的css浏览器兼容问题汇总,记录在这里自己好好学习一下 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的 ...
最新文章
- POJ 2104 K-th Number
- JavaScript | 使用提示从用户输入值
- mysql 增大数据库链接_怎么增大MYSQL数据库连接数
- 利用Kubernetes名称空间来管理内存和CPU资源(二)
- php使用使用外部变量的值,PHP实现函数内修改外部变量值的方法示例
- 产品,是解决问题的载体
- 和 8 个程序员聊了一下午,集齐了这些经验!
- a href='../目录 +变量+ ' download='../目录 +变量+“'查看附件/a 使用变量
- android 投屏 版本号,安卓设备投屏画质模糊及投屏延迟的调整方法
- 用html5画卡通人物源代码,用canvas画一个卡通人物!!
- 基于SSM框架的实验室设备管理系统
- 中国微观企业实证研究常用指标集合(2000-2020)
- 2021多校补题(8)
- 笔记本(只有一个HDMI接口)接双屏的方案(谨慎使用)
- mysql用update select批量处理数据
- 企业视频直播平台有哪些呢
- vue实现鼠标拖拽div滚动效果-vue-dragscroll(整理)
- 计算机CPU加,减,乘,除的原理
- HTML—— 超链接 行内框架 表格 知识总结。
- 【转】使用cocosbuilder在cocos2d-…
热门文章
- [BZOJ 3052] [wc2013] 糖果公园 【树上莫队】
- UVA12545_Bits Equalizer
- 最近要使用User Interface Process Application Block for .NET(微软net开发架构)
- maven解析xml+测试test+注解
- Redis:四、jedis连接redis服务器
- 130242014039-(2)-体验敏捷开发
- js最基础知识回顾1(参数,函数,网页换肤)
- 谈恋爱、结婚的5种境界
- 25个jQuery的编程小抄
- PHP之mb_convert_case使用