CSS IE7 IE6 Firefox多浏览器兼容(转摘)
http://www.keephelp.com/css/divcss-ie7-ie6-firefox-1/
在理想的环境中,编写正确的CSS会在支持CSS的每个浏览器中正常工作。不幸的是,我们并不是生活在理想的世界中,浏览器有不少的Bug和不一致的地方。为了创建能够在各种浏览器上显示相同样式的页面,CSS开发人员需要发挥创造性。通过利用Bug(hack)和未实现的CSS,开发人员能够选择性地对不同浏览器应用不同地规则。“招数Hack”和“过滤器”是CSS开发人员地强大工具。但是,正因为功能强大,使用时应该谨慎。了解各种常用招数Hack以及他们地工作原理确实很重要。但是,了解在什么时候应用他们以及什么时候不应该使用也同样重要。
在后面讲陆续讲这样的一些东西。
- 招数和过滤器之间的差异。
- 好的过滤器和差的过滤器以及如何复责任地使用他们。
- IE地有条件注释。
- 星号Html过滤器和星号、加号Html过滤器。
- 注释反斜线过滤器和Holly招数。
- 反斜线过滤器和修改后地简化框模型招数(MSBMH)。
- !important 和下划线过滤器。
- 子过滤器和属性过滤器
多浏览器兼容是一件苦力活,其实没有什么难度,针对不同地浏览器利用上面讲地方法,适当地写上不同浏览器支持地样式,这样多浏览器在一块就和谐了。 甚至在不同的操作系统也可以和谐共处。比如MAC和PC。要相信自己能够战胜这样的困难,多浏览器兼容需要不停的调试,需要耐心,我以前曾写过一个没有利 用任何Bug(Hack、!important)的CSS,也可以完美支持所有的浏览器,虽然一个页面的CSS需要几天来调试,但是这件苦力活并不是不可能完成的。其实还是一句老话,世上无难事,只怕有心人。
一、Hack实施策略
应该使用怎样的策略保证一个网站的CSS简单明了,而且又能适应众多浏览器呢?如果经过充分的思考,认识到只能应用某种Hack或过滤器,那么需要以明智且受控制的方式应用它。如果CSS短小而且简单,并且只需要应用很少几个Hack,那么将这些Hack放在主CSS文件中可能是安全的。但是,Hack往往相当复杂,使代码更加难懂。如果CSS文件很长,或者需要使用的招数比较多,那么最好将它们放在它们自己的样式表中。这不但使代码容易阅读,而且如果Hack在新的浏览器中造成了什么问题,那么可以准确的知道它的位置。与此相似,如果决定取消对某种浏览器的支持,那么只需要删除适当的CSS文件,就可以删除相关联的Hack。或者用程序判断浏览器信息,然后链接相应的CSS文件。或者可以用条件注释。
为了帮助你正确的选择过滤器或者Hack,推荐这个站点(http://centricle.com/ref/css/filters/)。这个站点提供了表格来描述那些过滤器在那些浏览器中是有效的,非常详尽。
常用Hack浏览器匹配图:
二、条件注释
有条件注释是一种专门的(因为是非标准的)、对常规(X)Html注释的Microsoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览 器版本)显示代码块。因为使非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的。有条件注释在Windows 上的IE5中首次出现,并且得到了Windows浏览器的所有后续版本的支持。
要想将一个特定的样式表交给IE5、IE6、IE7或更高的版本,那么可以在(X)Html文档的开头放置一下代码:
<!--[if IE]
<style type="text/css">
@import ("ie.css");
</style>
-->
Windows上的IE5和更高版本会接收样式表ie.css,而其他所有浏览器只会看到一些被注释掉的文本。可以使用有条件注释指定一种特定的浏览器,比如IE6.0
<!-- [if IE 6]
<style type="text/css">
@import ("ie60.css");
</style>
-->
还可以指定一组浏览器,比如IE5.5和更高的版本:
<!-- [if gte IE 5.5000]
<style type="text/css">
@import ("ie55up.css");
</style>
-->
或者IE7
<!-- [if It IE 7]
<style type="text/css">
@import ("ie70.css");
</style>
-->
这种办法极其有效,而且非常容易记住。主要的确定是这些注释需要放在HTML中,而不是放在CSS中。如果某一阶段你希望停止支持某种浏览器,就需 要从每个页面中删除注释,当然这只是针对静态页面的站点了,如果你是动态网站的话,把CSS作为可动态调用的一部分,这样修改起来也很方便的。如果你觉得 还不好,那我们下一篇再看另外一个过滤器Tantek Celik。
三、Tantek Celik的带通过滤器
Tantek Celik 基于浏览器解析错误创建了一系列过滤器(http://tantek.com/css/examples/),允许使用@import规则将样式表提供给选择的浏览器。因为他们是CSS规则,所有这些过滤器可以放在一个CSS文件中,这样就可以再一个地方集中的控制过滤的文件。将招数Hack隔离到浏览器特定的CSS文件中,可以大大简化对招数Hack的管理。如果决定停止对某一浏览器(比如IE 5.0)的支持,那么只需要删除相关的样式表,而不需要再大量页面代码中进行搜索和修改。
注意: /**/ 是CSS中的注释格式。其实下面所说的所有过滤方法都是 /**/注释 和 \ 转义的混合效果。
要想将CSS文件传递给 Windows 上的IE5.5 和IE5,可以使用 Tantek 的中统过滤器:
@media tty {
i{content:”\”;/*” “*/}} @import ‘ie5x.css’; /*”;}
}
这个过滤器看起来像一堆无意义的规则,而且对于许多浏览器确实如此。只能理解CSS 1的 浏览器不认识@media 规则,因此完全忽略它。能力更强的浏览器会看到@media 规则中的一个声明,其目标是寻找<i>元素。由于第二个引号前面有一个转义字符,Content 属性的值被认为是一个无意义的字符串。基本上,现代浏览器会看到下面这样的规则:
@media tty {
i { content:”Blah, blah blah”;}
}
转义字符是一个保留字符(通常是反斜线),它使解析器忽略后面的保留字符。所以所以,如果希望使用 CSS content 属性自动生成一个引号,那么必须对它进行转义,否则它就会结束前引号:
blockquote:before {content: “\”"}
tty 媒体类型指的终端和电传打印机。新运的使,当前没有设备支持这种媒体类型,所以符合标准的浏览器实际上会忽略整个规则。
但是,IE5.x/Windows 不理解转移字符的,所以会提前结束内容声明。后面的字符会结束<i> 和@media规则,这导致应用@import 规则。所有多于的字符都被注释掉,因此再 IE 5.x/Win 看来整个规则像下面这样:
@media tty {
i { content:”blah” ;
/* blah */
}
}
@import ‘ie5x.css’
/* blah */
这非常复杂,但是幸运的是,你不需要知道这些过滤器是则怎么工作的,只需要知道怎么使用他们就可以了。
为了向IE 5.x/Win 的特定版本提供CSS文件,创建了中通过滤器的两个变体,他们利用了这些特定浏览器中各种Bug。这些过滤器称为IE 5/Windows 带通过滤器:
@media tty {
i {content:”\”;/*” “*/}}; @import ‘ie50win.css’; {;}/*”;}
}/* */
和IE 5.5/Windows 带通过滤器}
@media tty{
i {content:”\”;/*” */}}@m; @import ‘ie55win.css’; /*;}
}
另一种可能希望明确指定的浏览器是Mac 上的IE 5.2。为此,可以使用Tantek的IE5/Mac带通过滤器,它利用了另一个转义Bug,这一次是在注释中:
/*\*//*/
@import “ie5mac.css”;
/**/
IE 5/Mac 错误地对第二个星号进行转义,导致应用@import 规则。因此, IE5/mac 会看到下面这样的规则:
/* blah */
@import “ie5mac.css”;
/**/
而其他所有浏览器都会正确的忽略转义的元素,因为它放在一个注释中,@import 规则被注释掉了。其他所有浏览器都会看到下面这样的规则(实际上就是没有规则)
/* blah *//*
blah
*/
与其他带通过滤器一样,不需要理解这个过滤器的工作原理,直接使用即可。这些过滤器的出色之处在于,他们巧妙的利用了老式浏览器中的Bug。因此,应该可以放心的使用他们,他们应该不会在新式的浏览器中造成问题。
PS:也许你过两天也发现了你独特的过滤器哦~~ :)
四、子选择器招数(Hack)和属性选择器
最安全的过滤器依赖于未实现的CSS,而不是浏览器Bug。因为这些过滤器使用有效的CSS选择器来应用有效的声明,所以严格地说,他们根本不是过滤器。他们仅仅是某些浏览器所不能理解的有效CSS规则。这些过滤器中的第一个称为子选择器招数。Windows上的IE6和更低版本的IE不支持子选择器,所以可以使用它对这些浏览器隐藏规则。为了让这种过滤器起到作用,必须确保在子选择器前后没有空格。
在这个示例中,使用子选择器招数(Hack)对IE 5-6/Win 隐藏透明的北京PNG图象。
html>body {
background-image:(bg.png)
}
IE7 预期会支持子选择器,还会支持PNG透明度。通过以这种方式使用子选择器,就允许IE的新版本看到透明背景,而不需要修改代码,因而提供了向前兼容性。等于ie5,i56视而不见,而IE7可以用得恰当好处,这里并不是多浏览器兼容,而是向前兼容。
属性选择器招数(Hack)
另一种过滤器规则的有趣方法是使用属性选择器。许多当前的浏览器(比如 Safari–Mac苹果上的 和Firefox IE7)支持使用属性选择器,但是IE6并不支持它。因此,可以使用属性选择器在比较高级的浏览器中对类和ID应用样式。在这个示例中,使用属性选择器在 符合标准的浏览器中将背景PNG应用于内容div:
div[id="content"] {
background=url(bg.png);
}
你可以用这些让不同浏览器显示出不同的效果,当然也可以使用它在多浏览器里显示同样的效果。
五、著名的星号* Html Hack(招数)
对于CSS当中让IE7、IE6、Firefox兼容最著名且最有用的CSS过滤器之一是星号 * Html HACK。这个过滤器非常容易记住,它可以制定IE6和更低版本。正如你知道的,Html 元素被认为是网页上的第一个元素,即根元素。但是,IE 的所有当前版本有一个匿名的根元素,它包围着Html 元素。那么这个匿名的元素或者说隐藏的元素到底是什么元素呢?其实它就是鼎鼎大名的* 号,所以我们可以用星号来指定的规则应用于那些被星号包围的 HTML。
IE6以及更老的IE5.5
* html {
font-size:small;
}
在任何非ie的浏览器因为没有这个规则(Html元素被*号包围),所以其他的浏览器就会当作看不见,所以当你指定这个规则的时候,你可以放心的应 用在IE6以及前一版本的IE5.5要展示效果中。IE 7 并没有完全去掉这个 Hack。而是用这样的办法来让过滤,那就是用 *+
IE7
*+html {
font-size:small
}
这样的表达,就是说除了IE7能认识这个font-size:small以外,其他的浏览器都不会看到这一条的,可以说这是IE7的专属Hack。
这样的方式可以写在同一个CSS文件,并且同时都会针对不同的浏览器产生独特的效果。所以在设计页面或者样式的时候,你不妨用FireFox 来做第一浏览器,对照Firefox样式写好后,再把页面放到IE7下看看,进行适当的调整,再放到IE6下面看看,进行适当的调整。基本上按 照<div><ul><li></li></ul></ul>的顺序嵌套的 话,IE6根IE7的规则是差不多的。调好了IE6的样式就等于调好了IE7的样式,反之亦然。再者,用Firefox来写样式还是更符合W3C一些,因 为IE6和IE7要考虑到以前的兼容性,不得不在规范上做些让步,达到兼容的目的。虽然大家都很憎恶为什么多一个Firefox,但是这是没办法的:(。 你要掌控它而不是被它掌控了^_^。
基本上用星号搭配搞定IE6,IE7,Firefox以后,像Opera之类的浏览器也会正常显示的。就不用单独考虑他们的兼容问题了。
作者:xddxz
转载于:https://www.cnblogs.com/JoannaQ/archive/2012/10/04/2711325.html
CSS IE7 IE6 Firefox多浏览器兼容(转摘)相关推荐
- CSS IE7 IE6 Firefox多浏览器兼容
在理想的环境中,编写正确的CSS会在支持CSS的每个浏览器中正常工作.不幸的是,我们并不是生活在理想的世界中,浏览器有不少的Bug和不一致的地方.为了创建能够在各种浏览器上显示相同样式的页面,CSS开 ...
- 有关css和js针对不同浏览器兼容的问题
首先谈一下浏览器,虽然现在ie依然是浏览器市场的老大,大约占有67%的份额,但是由于其各方面的欠缺,用户开始选择其他浏览器作为自己浏览网页的主要 工具,比如firefox.theworld.maxth ...
- 黑马程序员之HTML学习笔记:有关css和js针对不同浏览器兼容的问题
--------------------------------------------------- 2345王牌技术员联盟.2345王牌技术员联盟.期待与您交流!----------------- ...
- 解决方案/DIV+CSS 在 IE7/IE6/Firefox间的兼容性问题
DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css 样式兼容不同浏览器问题,特别是对完全使用DIV+CSS设计的网页,就应该更注意IE6 ...
- CSS快速学习9:浏览器兼容
五大浏览器内核 •Trident (MSHTML) (三叉戟:三叉线:三齿鱼叉) •Gecko (壁虎) •Presto ( 迅速的) •Webkit (Safa ...
- 浏览器兼容css hack,CSS Hack技术解决多浏览器兼容问题
本文向大家描述一下如何使用CSS Hack技巧解决DIV+CSS布局多浏览器兼容问题,针对不同的浏览器写不同的CSS代码的过程,就叫CSS Hack,相信本文介绍一定会让你有所收获. CSS Hack ...
- IE6,IE7,firefox火狐浏览器兼容性在DIV+CSS中的写法
DIV+CSS浏览器兼容问题一直困绕着许多从事DIV+CSS网页排版的美工人员,尤其是IE与火狐的兼容.用DIV+CSS布局的网页在IE下显示一切正常,可是在火狐(FireFox)浏览器里打开,本来好 ...
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的漏洞 ...
- 转载 Div+css浏览器兼容实例分析(一)
为什么80%的码农都做不了架构师?>>> 今天又在OECP社区发现了一篇好文章,<Div+css浏览器兼容实例分析>,因为文章太长所以分为两篇上传给大家分享. 用d ...
最新文章
- 神了!阿里资深大牛熬夜整理Python学习路线,终于开放了
- ios 位置服务器,iOS 14 隐私保护:管理和控制共享的位置信息
- 【Python】 list dict str
- 让电脑死机的java代码_小编为你win7系统Java活动脚本出错导致电脑死机的还原方法...
- 如何使用facenet详解_如何使用冰箱更节能 使用冰箱节能技巧介绍【详解】
- 一步步编写操作系统 78 intel汇编与ATT汇编语法区别
- DHPST云主机分销系统源码
- ARM MMU工作原理剖析
- Ubuntu snap for 树莓派
- redux,react-redux之间的关系
- C++信息学奥赛一本通_1020
- SQLite数据库锁机制研究
- Failed to instantiate [com.XXX.entity.People]
- python编写程序统计一元人民币换成一分、两分和五分的所有兑换方案个数(用while循环)
- [ZZ]什么是Google Urchin:了解Urchin与Google Analytics差异
- vue中使用echart实现三维立体图
- 如何把EXCEL文本格式里的数字批量转成文本
- 配置服务器的dns文件是什么意思,什么是服务器配置,DNS服务器如何配置
- JavaWeb:(二)HTML
- 王衠:爱游戏电视游戏平台将实现宽带支付