IE6, IE7, Firefox, Opera , Safari 的 CSS Hacks
ie6将元素悬停
.ie6 {
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat')
? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight-20)
: document.body.scrollTop +(document.body.clientHeight-this.clientHeight-20)); /*底端*/
top: expression(eval(document.documentElement.scrollTop));/*顶端*/
}
ie6 png透明兼容
//除ie6
.face1Bg{background:url(images/1.png) no-repeat !important;}
//兼容ie6
.face1Bg{*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src="images/1.png") !important;*background:none !important;}
IE系列:
div { +property:value; } 在属性名前加上加号”+”,这个Hack只有IE系列可以识别.
div { *property:value; } 在属性名前加上星号”*”,这个Hack只有IE系列可以识别.
div { _property:value; } 在属性名前加上下划线”_”,这个Hack只有IE6 识别.
background-color:red\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/
IE的if条件Hack
<!–[if IE]>Only IE <![endif]–> \\所有的IE可识别
<!–[if IE 5.0]> Only IE 5.0 <![endif]–> \\只有IE5.0可以识别
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–> \\IE5.0包换IE5.5都可以识别
<!–[if lt IE 6]> Only IE 6- <![endif]–> \\仅IE6可识别
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>\\ IE6以及IE6以下的IE5.x都可识别
<!–[if lte IE 7]> Only IE 7/- <![endif]–>\\ 仅IE7可识别
Firefox:
*:lang(lang) div { property:value !important; } 用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.
div, x:-moz-any-link { property:value; } 目前只有Firefox可以识别.
Safari:
div:empty { property:value !important; } 用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.
Opera:
@media all and (min-width: 0px){ div { property:value; } } 利用特殊继承法进行定义的话,目前只有Opera可以识别.
由于万恶的IE(尤其指IE6和IE7),我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器[1]中可实现的效果在IE里却有各种离奇问题,例如IE6、IE7不能良好应对的inline-block和.clearfix问题,好在大部分问题已经有了足够的总结和途径。废话不多说,下面是一些方法区分浏览器的方法和我的看法。
主要途径CSS Hack
直接在CSS文件中写CSS Hack是非常直观的区分方法。区分不同IE版本的hack代码为
#content{ background:red; /* 所有浏览器 */ background:orange\9; /* 所有IE浏览器 */ *background:yellow; /* IE7和IE6 */ +background:green; /* IE7 */ _background:blue; /* IE6 */ }
还有一些hack不太实用,就不一一列举了。
CSS Hack的缺点是CSS文件无法通过W3C验证,代码阅读时会很奇怪。
条件注释CSS文件
条件注释是写在html里的只会被IE识别的代码,一般在<head>区域通过不同的条件注释导入不同的CSS,不同的IE浏览器会引用不同的CSS。下面的4段注释依次表示"在IE下使用"、“低于IE8时使用”、“IE7时使用”、“IE6时使用”:
<!--[if IE]> <link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" /> <![endif]--> <!--[if lt IE 8]> <link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" /> <![endif]-->
由于IE8下CSS问题较少,一般只需要为IE6、7写一点修正代码。如果需要,可以在ie.css里用CSS Hack对IE6/7进行差异处理。
<!--[if lt IE 8]> <link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /> <![endif]-->
条件注释CSS文件的缺点是会增加至少1次http请求,影响渲染速度,而且维护时不够方便。
条件注释<html>
条件注释<html>跟上面的方法原理一样,只不过这里是给<html>注释不同的class。
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
这样在CSS中使用下面的代码即可区分版本
#content{background:red;} .ie9 #content{background:orange;} .ie8 #content{background:yellow;} .ie7 #content{background:green;} .ie6 #content{background:blue;}
你也可以增加诸如.ltie8这样的class来实现更方便的版本分组管理。这个方法不会增加http请求,而且不需要任何hack。
最佳方法
毫无疑问,最好的办法就是用条件注释<html>为CSS提供区分。所有CSS文件可以合并在一起,ie的fix代码与正常规则临近,便于维护,而且没有hack可以让代码符合标准(使用zoom、私有CSS3属性依旧无法通过验证T_T)。
标准浏览器[1]:本文指Chrome、Safari、Firefox及Opera等支持CSS标准属性的浏览器。
http://lightcss.com/best-way-to-different-browser-for-css/区分IE6、IE7、IE8及标准浏览器——条件注释<html>
分享到:
相关推荐
表单编辑<br>JSP语法(1)——HTML注释<br>JSP语法(2)——隐藏注释<br>JSP语法(3)——声明<br>JSP语法(4)——表达式<br>JSP语法(5)——Scriptlet<br>JSP语法(6)——Page 指令<br>JSP语法(7)——Taglib ...
对话框高级应用<br>7.2.2 示例——实现无模式对话框<br>7.4.5 示例——使用模式属性表及向导属性表<br>7.5.4 示例——鼠标敏感文字<br>第8章 GDI+图形编程<br>本章示例通常含有多段被注释的演示代码,请读者查看...
对话框高级应用<br>7.2.2 示例——实现无模式对话框<br>7.4.5 示例——使用模式属性表及向导属性表<br>7.5.4 示例——鼠标敏感文字<br>第8章 GDI+图形编程<br>本章示例通常含有多段被注释的演示代码,请读者查看...
<br>第1章 Java基础 <br>1.1 转换基本数据类型 <br>1.2 Java的运算符 <br>1.3 控制程序的流程 <br>1.4 计算阶乘 <br>1.5 实现命令行程序 <br>第2章 Java面向对象程序设计 <br>2. 1 复数类 <br>2. 2 equals.chashCode...
清除C#代码中所有注释信息,主要清除格式如下:<br>1、多行注释<br>/*<br>.....<br>*/<br>2、单行注释<br>与 // ********<br>3、类注释<br>/// <summary><br>/// 内容<br>/// </summary><br>4、展开或折叠的代码块...
C# XML入门经典——C#编程人员必备的XML技能 <br>作者:[美]Stewart Fraser, Steven 著,毛尧飞,崔伟 译 出版社:清华大学出版社 出版时间:2003年11月 <br>第1章 在C#中使用XML的原因<br><br>1.1 使用XML的原因<br...
5.1 实现注释的格式 <br>o 5.1.1 块注释 <br>o 5.1.2 单行注释 <br>o 5.1.3 尾端注释 <br>o 5.1.4 行末注释 <br><br>? 5.2 文挡注释 <br>6 声明 <br>? 6.1 每行声明变量的数量 <br>? 6.2 初始化 <br>? 6.3 布局 <br...
8<br><br>0018 有效利用Visual Studio 2005附带程序 8<br><br>0019 有效使用MSDN帮助 9<br><br>0020 如何设置MSDN帮助 9<br><br>1.4 其他 10<br><br>0021 如何添加项目引用 10<br><br>0022 如何添加Web...
IE7.js 使IE5、IE6升级至兼容...注释使Internet Explorer版本号小于8的IE浏览器载入该代码,而其它符合标准的浏览器则会忽略该代码,并在IE8出来后不干扰其工作。 <!–[if lt IE 8]> [removed][removed] <![endif]–>
注:可以使用if条件注释语句,使这些文件只在ie6激活,以便在其他浏览器下加快加载速度。 <!--[if lte IE 6]> <style type="text/css"> img, div{behavior:url(iepngfix.htc);} </style> <script type="text/...
微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。 让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,...
第一节:IE7-IE8更新 3 1. 如果缺少结束标记的 P 元素后跟 TABLE、FORM、NOFRAMES 或 NOSCRIPT 元素,会自动添加结束标记。 3 2. 支持格式正确的有效标记,不再支持格式错误的 HTML。 4 第二节: IE8-IE9更新 5 1. 表...
有问题欢迎来信讨论:<br>talent_marquis@163.com<br><br>才搜索了一下,发现jExplorer这个名字已经泛滥了<br><br>最核心代码来自IBM的JFace教程<br>链接如下:<br>...<br><br>已经实现的基本功能:<br><br>1....
这里再次赞叹 ToolStrip 控件的强大~~<br><br>7、实现了地址条输入框历史记录管理、搜索关键字历史记录管理<br><br>8、花的时间很短,bug很少,不过代码没什么注释,读者就费点眼神吧,呵呵 :-) <br>
代码结构<br> 第7章 代码的格式化<br> 第8章 代码的注释<br> 第9章 循环结构<br> 第10章 控制代码流<br><br>第四部分 用户界面的操作<br> 第11章 用户界面的设计<br> 第12章 用户的输入和通知消息...
<br><br>/**<br><br>* @author Holen Chen<br><br>*/<br><br>public class Dom4jDemo {<br> public Dom4jDemo() {<br> }<br><br> /**<br><br> * 建立一个XML文档,文档名由输入属性决定<br><br> * @param filename 需...
本代码主要利用MATLAB工具实现MATLAB——实现注释矩形框,简单明了,易于理解
xxm.zip<br>餐桌管理程序(83KB)<END><br>6,dfbak.zip<br>电费管理程序(981KB)<END><br>7,pterm01b.zip<br>终端仿真程序(63KB)<END><br>8,drivevie.zip<br>查看系统安装的驱动器(34KB)<END><br>9,findprocess.zip<br>...
cas 配置client 1.0 &2.0 及proxy DEMO 说明 1 cas server 搭建 1.1 资源准备 cas server 下载 http://www.ja-sig.org/downloads/cas/cas-server-3.3.1-release.zip 1.2 解压后打开cas-server-3.3.1-release\cas-...
地图选择,点选、圆选、矩形选、多边形选择、全选和全不选<br><br>6.SQL查询<br><br>7.数据绑定包括:图层绑定、ADO数据集、DAO数据集、RDO数据集、SAFEARRAY、NormalBinding、绑定客户数据<br><br>8.创建、修改、...