css区分各个浏览器和css Hack

最新推荐文章于 2022-04-29 11:26:27 发布

原创最新推荐文章于 2022-04-29 11:26:27 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

js 同时被 2 个专栏收录

31 篇文章

订阅专栏

样式

20 篇文章

订阅专栏

本文深入探讨了如何通过CSS属性在不同浏览器（如IE6、IE7、Firefox等）间实现兼容性与特性区分，包括背景色的设定、IE6与IE7的特殊标记使用、以及针对FF的!important规则。通过实例展示了如何利用这些差异性进行有效布局与样式控制。


<SCRIPT LANGUAGE="JavaScript">
<!--
alert(window.navigator.userAgent);
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
 alert("ie");
}else{
   if (window.navigator.userAgent.indexOf("Firefox")>=1)
  {
   alert("firefox");
  }else if (window.navigator.userAgent.indexOf("Chrome")>=1){
   alert("chome");
  }  else{alert("others");}
}

</SCRIPT>

二


区别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;

三
[quote]
IE6以下
*html{}//未验证
IE 7 以下
*:first-child+html {} * html {}//未验证
只对IE 7
*:first-child+html {}//已验证
只对IE 7 和现代浏览器
html>body {}
只对现代浏览器(非IE 7)//对ff和chrome已验证、、并且都可用这个方法设置css，据说IE8也可以、、、未验证
html>/**/body {}
最新的Opera 9以下版本
html:first-child {}
Safari
html[xmlns*=”"] body:last-child {}
[/quote]
实例


p.test {
  background-color: red;
  *background-color: blue;//IE6
  background-color: blue!important;//IE7..比下面的级别低。共存时使用下面css
}

*:first-child+html p.test {
  background-color: black;//IE7下
}
</style>
</head>

<body>
<body>
		<p class="test">333333333333333333333</p>
</body>

四


IE7可以辨识「*」和「!important」，//已验证
但是IE6只可以辨识「*」，却无法辨识「!important」，//验证失败、、ie仍然可以识别
至于Firefox可以读取「!important」但不能辨识「*」//已验证
因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。