FF IE6 IE7兼容解决办法

来源：互联网发布：苹果mac字体编辑：程序博客网时间：2024/05/06 20:27

1、一个文件中使用css区别
区别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        ×    √     √
     _                √     ×     ×
   *+               ×    √     ×

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。

屏蔽IE浏览器：
select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
*:lang(zh) select {font:12px !important;} /*FF的专用*/
select:empty {font:12px !important;} /*safari可见*/

IE6可识别：
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
select { display /*IE6不识别*/:none;}

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>关于用CSS区分Firefox、IE6、IE7</title>
<style type="text/css">
#example{color:red ;}/*firefox*/
* html #example{color:blue;}/*ie6*/
*+html #example{color:green;}/*ie7*/
</style>
</head>
<body>
<div id="example">在FireFox下应为红色，在IE6.0下应为蓝色，在IE7.0下应为绿色。</div>
</body>

2、html中判断IE浏览器类型

从这几个例子可以推广到ie5 ie5.5 ie8。其中类似于lt和gt的判断词汇如下：
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同

代码示例：

html:text.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

</head>

<body>
<div id="div1" class="div1">啊啊啊啊啊啊啊啊</div>
</body>
</html>

css:ie6.css
.div1 {
background-color:red; width:200px; height:50px
}

css:ie7.css
.div1 {
background-color:yellow; width:200px; height:50px
}