方法一:
跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同。因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法。CSS Hack技术有很多,具体可以查看:
本文据说的主要是通过“.”,“>”,“*”,“_”来区分。以下是本人对这四种符号的测试结果:
———————IE6—— IE7——IE8——FF2——FF3— Opera9.5
>property—— Y—— Y—— Y—— N—— N—— N
.property—— Y—— Y—— Y—— N—— N—— N
*property—— Y—— Y—— Y—— N—— N—— N
_property—— Y—— N—— N—— N—— N—— N
我们可以看到>property、.property、*property在各浏览器中的表现是一致的,只有_property在IE6和IE7、IE8中有所区别。另外还要注意的,IE6是不支持!important的,而其他几款浏览器都识别。
举例:
要对想同的文字在不同浏览器中显示不同的颜色可以使用:
color:brown !important;
-
>color:green !important;
-
color:red;
color:brown !important; /*用于Opera、Firefox2、Firefox3等现代浏览器*/
>color:green !important; /*IE7、IE8可以识别该规则,因此它覆盖掉了上一条规则*/
color:red; /*所有浏览器都可以识别,但是以上两条规则有!important,所以这条规则被忽视;只有IE6认识并覆盖掉上两条规则*/
因此这就实现了跨浏览器的表现问题。_property和*property也是一样的。对于_property来说,只有IE6才能识别,因此可以用于单独对IE6的设置中。
不过这里要注意书写的顺序:现在浏览器的写法要写在最前面,IE6的写法要写在最后面用于覆盖,其他浏览器写在中间。
方法二:
其实主要是浏览器:IE6/IE7/firefox下,各个对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能识别
*,但不能识别
!importantIE7能识别
*,也能识别
!importantFF不能识别
*,但能识别
!important另外再补充一个,下划线"
_",
IE6支持下划线,IE7和firefox均不支持下划线。(推荐.我这只有这个有效!)
于是大家还可以这样来区分
IE6、
IE7、
firefox: background:
orange;
*background:
green;
_background:
blue;
* html p {color:#f00;} 支持 IE6 不支持FF IE7 IE8b
*+html p {color:#f00;} 支持 IE7 IE8b 不支持FF IE6
p {*color:#f00;} 支持 IE7 IE6 不支持FF IE8
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在后面。
分享到:
相关推荐
简单CSShack:区分IE6、IE7、IE8、Firefox、Opera().pdf
CSS Hack兼容大全,令网页能正常显示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器上
browser-hack-sass-mixins:浏览器hack sass mixin-将SCSS应用于特定的浏览器-CSS hacks:IE,Chrome,Firefox,Edge,Opera
仅 Firefox 3 和 IE7 识别的 Hack。 1、仅 Safari 和 Opera 识别的 Hack @media all and (min-width: 0px){/* Safari and Opera rules here */} 或者 @media screen and (-webkit-min-device-pixel-ratio:0) {/* ...
知道CSS的朋友一定听说过CSS hack,现在的浏览器IE、Firefox、Chrome、Opera、Safari。。。百家争鸣,可苦了Web前端开发人员了。
今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器
什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一...
important就能够零丁给firefox做hack了,可是此刻多了ie八、opera、chrome等这些个所说的规范浏览器后,firefox能熟悉的工具它们都熟悉,偏生firefox有个致命的bug就是不撑持input的line-height属性,于是我又犯合计了,...
CSS类级别的hack仅IE7识别 *+html {…} IE6及IE6以下识别 * html {…} opera、safari、chrome识别: @media all and (min-width: 0px){…} //Firefox3.0.6不识别,但Firefox3.6也识别该规则,如果Firefox版本有...
——IE6—— IE7————IE8——FF2————FF3——— Opera9.5>property—— Y———— Y———— Y———— N———— N———— N.property —— Y———— Y———— Y———— N———— N———— N*property...
基于jquery做的网页版仿苹果系统导航菜单,效果非常流畅 华丽 不解释。。。 用法: 在页面头部标签<head></head>中加入下面的代码 ...我已经在IE 6, IE 7, Opera 9, Firefox 2, Firefox 3 and Safari 2上测试通过。
该技巧经主流浏览器测试:Firefox, Safari, Opera, 以及Internet Explorer 6。 好处 这是一个纯CSS技巧,无需JS或Flash。它兼容主流浏览器包括IE6 (需要使用PNG hack)。 它对于设计标题是很完美的。你无需使用...
向上融科前端代码规范浏览器测试与支持我们支持的浏览器为:IE8 +, Chrome, FireFox, Opera, 360浏览器, QQ 浏览器, 猎豹浏览器。渐进退化,产品在 Chrome 及国内的 Chromium 内核浏览器上的体验应该做到最好,包括...
程序员面试刷题的书哪个好 本文旨在加深对前端知识点的理解,资料来源于网络,由本人收集整理。...3.Firefox最多50个cookie 4.chrome和Safari没有做硬性限制 IE和Opera 会清理近期最少使用的cookie,Firefo
支持三级嵌套选项卡。 重用性极高,在IE6+,Firefox2+,Opera9中均能正常工作,且并没有使用hack。 灵活性也很高。
懒:Kule Lazy4 CSS框架
urbrowser:发现用户的平台,系统以及浏览器