让 CSS 兼容 IE 和 Firefox 的技巧集合
CSS 对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也
不是难事，从网上收集了 IE7,6 与 Fireofx 的兼容性处理方法并整理了一下。对于 的
过度，请尽量用 xhtml 格式写代码，而且 DOCTYPE 影响 CSS 处理，作为 W3C 的标准，
一定要加 DOCTYPE 声明。
CSS 技巧
的垂直居中问题
vertical-align:middle; 将行距增加到和整个 DIV 一样高 line-height:200px; 然后插入文字，
就垂直居中了。缺点是要控制内容不要换行
2. margin 加倍的问题
设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6 都存在的 bug。解决方
案是在这个 div 里面加上 display:inline;
例如：
＜#div id=”imfloat”>
相应的 css 为
#imfloat{
float:left;
margin:5px;/*IE 下理解为 10px*/
display:inline;/*IE 下再理解为 5px*/}
3.浮动 ie 产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下 IE 会产生 200px 的距
离 display:inline; //使浮动忽略}
这里细说一下 block 与 inline 两个元素：block 元素的特点是,总是在新行上开始,高度,宽
度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内
嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的
效果 diplay:table;
4 IE 与宽度和高度的问题
IE 不认得 min-这个定义，但实际上它把正常的 width 和 height 当作有 min 的情况来使。
这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用
min-width 和 min-height 的话，IE 下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width:
80px; min-height: 35px;}
5.页面的最小宽度
min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样
就能保证排版一直正确。但 IE 不认得这个，而它实际上把 width 当做最小宽度来使。为了
让这一命令在 IE 上也能用，可以把一个＜div> 放到 ＜body> 标签下，然后为 div 指定一
个类,然后 CSS 这样设计：
#container{ min-width: 600px; width:expression( ＜ 600?
"600px": "auto" );}
第一个 min-width 是正常的；但第 2 行的 width 使用了 Javascript，这只有 IE 才认得，
这也会让你的 HTML 文档不太正规。它实际上通过 Javascript 的判断来实现最小宽度。
浮动 IE 文本产生 3 象素的 bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有 3px 的
间距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
＜div id="box">
＜div id="left">＜/div>
＜div id="right">＜/div>
＜/div>
捉迷藏的问题
当 div 应用复杂的时候每个栏中又有一些链接，DIV 等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对
#layout 使用 line-height 属性 或者给#layout 使用固定高和宽。页面结构尽量简单。
的 div 闭合;清除浮动;自适应高度;
①例如：＜#div id=”floatA” >＜#div id=”floatB” >＜#div id=”NOTfloatC” >这里的
NOTfloatC 并不希望继续平移，而是希望往下排。(其中 floatA、floatB 的属性已经设置为
float:left;)
这段代码在 IE 中毫无问题，问题出在 FF。原因是 NOTfloatC 并非 float 标签，必须将
float 标签闭合。在 ＜#div class=”floatB”> ＜#div class=”NOTfloatC”>之间加上 ＜#div
class=”clear”>这个 div 一定要注意位置，而且必须与两个具有 float 属性的 div 同级，之间不
能 存 在 嵌 套 关 系 ， 否 则 会 产 生 异 常 。 并 且 将 clear 这 种 样 式 定 义 为 为 如 下 即
可： .clear{ clear:both;}
①作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在 wrapper 里面
加上 overflow:hidden; 当包含 float 的 box 的时候，高度自动适应在 IE 下无效，这时候应该
触发 IE 的 layout 私有属性(万恶的 IE 啊！)用 zoom:1;可以做到，这样就达到了兼容。
例如某一个 wrapper 如下定义：
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
①对于排版,我们用得最多的 css 描述可能就是 float:left.有的时候我们需要在 n 栏的
float div 后面做一个统一的背景,譬如:
＜div id=”page”>
＜div id=”left”>＜/div>
＜div id=”center”>＜/div>
＜div id=”right”>＜/div>
＜/div>
比如我们要将 page 的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是
我们会发现随着 left center right 的向下拉长,而 page 居然保存高度不变,问题来了,原因在于
page 不是 float 属性,而我们的 page 由于要居中,不能设置成 float,所以我们应该这样解决
＜div id=”page”>
＜div id=”bg” style=”float:left;width:100%”>
＜div id=”left”>＜/div>
＜div id=”center”>＜/div>
＜div id=”right”>＜/div>
＜/div>
＜/div>
再嵌入一个 float left 而宽度是 100%的 DIV 解决之
①万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代
码加入 Global CSS 中,给需要闭合的 div 加上 class="clearfix" 即可,屡试不爽.
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
8．高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层
对象使用 margin 或 paddign 时。
例：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
＜div id="box">
＜p>p 对象中的内容＜/p>
＜/div>
解 决 方 法 ： 在 P 对 象 上 下 各 加 2 个 空 的 div 对 象 CSS 代
码：.1{height:0px;overflow:hidden;}或者为 DIV 加上 border 属性。
10 .IE6 下为什么图片下有空隙产生
解决这个 BUG 的方法也有很多,可以是改变 html 的排版,或者设置 img 为 display:block
或者设置 vertical-align 属性为 vertical-align:top bottom middle text-bottom 都可以解决.
11.如何对齐文本与文本输入框
加上 vertical-align:middle;
＜style type="text/css">
＜!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
＜/style>
标准中定义 id 与 class 有什么区别吗
一.web 标准中是不容许重复 ID 的,比如 div id="aa" 不容许重复 2 次,而 class 定义的是
类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题
ID 的优先级要高于 class,看上面的例子
三.方便 JS 等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义
一个 ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远
远不如一个 ID 来得简单.
13. LI 中内容超过长度后以省略号显示的方法
此方法适用与 IE 与 OP 浏览器
＜style type="text/css">
＜!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
＜/style>
14.为什么 web 标准中 IE 无法设置滚动条颜色了
解决办法是将 body 换成 html
＜ !DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN"
"
＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
＜style type="text/css">
＜!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
＜/style>
15.为什么无法定义 1px 左右高度的容器
IE6 下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden
zoom: line-height:1px
16.怎么样才能让层显示在 FLASH 之上呢
解决的办法是给 FLASH 设置透明
＜param name="wmode" value="transparent" />
17.怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以
二
＜style type="text/css">
＜!--
div {
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
＜/style>
FF 与 IE
1. Div 居中问题
div 设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE 需要设定 body 居
中，首先在父级元素定义 text-algin: center;这个的意思就是在父级元素内的内容居中。
2.链接(a 标签)的边框与背景
a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照
menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar
中插入一个空格。
3.超链接访问过后 hover 样式就不出现的问题
被点击访问过的超链接样式不在具有 hover 和 active 了,很多人应该都遇到过这个问题,
解决方法是改变 CSS 属性的排列顺序: L-V-H-A
Code:
＜style type="text/css">
＜!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
＜/style>
4. 游标手指 cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
的 padding 与 margin
ul 标签在 FF 中默认是有 padding 值的,而在 IE 中只有 margin 默认有值,所以先定义
ul{margin:0;padding:0;}就能解决大部分问题
6. FORM 标签
这个标签在 IE 中,将会自动 margin 一些边距,而在 FF 中 margin 则是 0,因此,如果想显示
一致,所以最好在 css 中指定 margin 和 padding,针对上面两个问题,我的 css 中一般首先都使
用这样的样式 ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.
7. BOX 模型解释不一致问题
在 FF 和 IE 中 的 BOX 模 型 解 释 不 一 致 导 致 相 差 2px 解 决 方 法 ：
div{margin:30px!important;margin:28px;} 注 意 这 两 个 margin 的 顺 序 一 定 不 能 写 反 ，
important 这个属性 IE 不能识别，但别的浏览器可以识别。所以在 IE 下其实解释成这样：
div{maring:30px;margin:28px} 重 复 定 义 的 话 按 照 最 后 一 个 来 执 行 ， 所 以 不 可 以 只 写
margin:xx px!important;
#box{ width:600px; //for - w\idth:500px; //for ff+}
#box{ width:600px!important //for ff width:600px; //for ff+ width /**/:500px; //for -}
8.属性选择器(这个不能算是兼容,是隐藏 css 的一个 bug)
p[id]{}div[id]{}
这个对于 和 以下的版本都隐藏,FF 和 OPera 作用.属性选择器和子选择器还
是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如 p[id]中,所有 p
标签中有 id 的都是同样式的.
9.最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF 对于”!important”会自动优先
解析,然而 IE 则会忽略.如下
.tabd1{
background:url(/res/images/up/) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将 xxxx !important 这句放置在另一句之上，上面已经提过
,FF 的默认值问题
或许你一直在抱怨为什么要专门为 IE 和 FF 写不同的 CSS，为什么 IE 这样让人头疼，
然后一边写 css，一边咒骂那个可恶的 M$ IE.其实对于 css 的标准支持方面，IE 并没有我们
想象的那么可恶，关键在于 IE 和 FF 的默认值不一样而已，掌握了这个技巧，你会发现写
出 兼 容 FF 和 IE 的 css 并 不 是 那 么 困 难 ， 或 许 对 于 简 单 的 css ， 你 完 全 可 以 不 用
”!important”这个东西了。
我们都知道，浏览器在显示网页的时候，都会根据网页的 css 样式表来决定如何显示，
但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所
以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你
没有在 css 中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div 或者其他元素的
背景，如果在 css 中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样
式均如此。所以有很多东西出现 FF 和 IE 显示不一样的根本原因在于它们的默认显示不一
样，而这个默认样式该如何显示我知道在 w3 中有没有对应的标准来进行规定，因此对于这
点也就别去怪罪 IE 了。
11.为什么 FF 下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象 IE6 里那样被撑开的,那我又想固定高度,又想
能被撑开需要怎样设置呢？办法就是去掉 height 设置 min- height:200px; 这里为了照顾不认
识 min-height 的 IE6 可以这样定义:
{
height:auto!important;
height:200px;
min-height:200px;
}
下如何使连续长字段自动换行
众所周知 IE 中直接使用 word-wrap:break-word 就可以了, FF 中我们使用 JS 插入
的方法来解决
＜style type="text/css">
＜!--
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
-->
＜/style>
＜div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa＜/div>
＜scrīpt type="text/javascrīpt">
/* ＜![CDATA[ */
function toBreakWord(el, intLen){
var ōbj=(el);
var strContent=;
var strTemp="";
while(>intLen){
strTemp+=(0,intLen)+"
";
strContent=(intLen,);
}
strTemp+="
"+strContent;
=strTemp;
}
if( && !) toBreakWord("ff", 37);
/* ]]> */
＜/scrīpt>
13.为什么 IE6 下容器的宽度和 FF 解释不同呢
＜?xml version="" encoding="gb2312"?>
＜ !DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN"
"
＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
＜style type="text/css">
＜!--
div {
cursor:pointer;
width:200px;
height:200px;
border:10px solid red
}
-->
＜/style>
＜div ōnclick="alert()">让 FireFox 与 IE 兼容＜/div>
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里 IE6 解释
为 200PX ,而 FF 则解释为 220PX,那究竟是怎么导致的问题呢？大家把容器顶部的 xml 去掉
就会发现原来问题出在这,顶部的申明触发了 IE 的 qurks mode,关于 qurks mode、standards
mode 的相关知识,请参考: /
IE6,IE7,FF
出来了，对 CSS 的支持又有新问题。浏览器多了，网 Bpx; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。
这样也属于 CSS HACK，不过没有上面这样简洁。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
第二种，是使用 IE 专用的条件注释
＜!--其他浏览器 -->
＜link rel="stylesheet" type="text/css" href="" />
＜!--[if IE 7]>
＜!-- 适合于 IE7 -->
＜link rel="stylesheet" type="text/css" href="" />
＜![endif]-->
＜!--[if lte IE 6]>
＜!-- 适合于 IE6 及一下 -->
＜link rel="stylesheet" type="text/css" href="" />
＜![endif]-->
第三种，css filter 的办法，以下为经典从国外网站翻译过来的。.
新建一个 css 样式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个 div,并使用前面定义的 css 的样式：
＜div id="item">some text here＜/div>
在 body 表现这里加入 lang 属性,中文为 zh：
＜body lang="en">
现在对 div 元素再定义一个样式：
*:lang(en) #item{
background:green !important;
}
这样做是为了用!important 覆盖原来的 css 样式,由于:lang 选择器 并不支持,所以对
这句话不会有任何作用,于是也达到了 下同样的效果,但是很不幸地的是,safari 同样不
支持此属性,所以需要加入以下 css 样式：
#item:empty {
background: green !important
}
:empty 选择器为 css3 的规范,尽管 safari 并不支持此规范,但是还是会选择此元素,不管是否
此元素存在,现在绿色会现在在除 ie 各版本以外的浏览器上。
对 IE6 和 FF 的兼容可以考虑以前的!important 个人比较喜欢用第一种，简洁，兼容性
比较好。
如何让不同浏览器调用不同的 CSS 样式
发布时间：2009-06-13 09:19:43 作者: 2009 王辉
由于对 W3C 标准支持程度的不同，往往导致同一个 CSS 样式表在各种 Web 浏览器中
的呈现大相径庭。以目前市场占有率最高的两个浏览器 Microsoft Internet Explorer 和 Mozilla
Firefox 为例，前者对标准的支持明显不如后者，网页设计人员不得不花费大量的时间和精
力来调整代码以保持网页在二者中呈现的一致性——这是件非常痛苦的事情，顾此失彼的情
况时有发生。但放弃任何一方的用户都是不明智的，以北极冰仔部落格来说，使用 IE 的访
问者占所有访问者的 %，使用 Firefox 的访问者占 %，放弃一边就等于放弃掉了
一半的访问者。
所以，使用简单的方法以保证网页显示的一致性最重要。
第一个方法。在同一个 CSS 样式表中，使用 !important 来定义不同的值以适应 Firefox
和 IE，例如：
PLAIN TEXT
CSS:
padding: 20px !important; padding: 10px; 这个方法适用于修改少量代码。
第二种方法。条件注释。（只对 IE 浏览器有效）这也是北极冰仔部落格目前使用的方法。
先为不同浏览器书写各自的 CSS 样式，再在 head 中加入以下的代码以适应不同的 IE 浏览
器版本调用：
PLAIN TEXT
HTML:
According to the conditional comment this is Internet Explorer
/><![endif]-->
下边是别的网站上的，感觉内容不错就 copy 下来：
由于浏览器版本的不同，对 CSS 里某些元素的解释也不一样，才子当然也碰到同样的
问题，也收集了一些解决方法，才子之前贴过两个针对浏览器版本不同而选择不同 CSS 的
代码，有兴趣的朋友自己找找吧。
其实我们还可以利用条件注释的方法来达到类似的目的，什么是条件注释，才子也在此
简单介绍一下，无非就是一些 if 判断啦，呵呵，但这些判断不是在脚本里执行的，而是直
接在 html 代码里执行的，下面来介绍一下使用方法吧。
引用:
<!--[if XXX]>
这里是正常的 html 代码
<![endif]-->
这里 XXX 是一些特定的东东，在此列表几个出来，详细介绍各自的含义：
<!--[if IE]> / 如果浏览器是 IE /
<!--[if IE 5]> / 如果浏览器是 IE 5 的版本 /
<!--[if IE 6]> / 如果浏览器是 IE 6 的版本 /
<!--[if IE 7]> / 如果浏览器是 IE 7 的版本 /
......
上面是几个常用的判断 IE 浏览器版本的语法，下面再来介绍一下相对比较少用的逻辑
判断的参数：
有几个参数：lte，lt，gte，gt 及!
各自的详细解释如下：
引用:
lte：就是 Less than or equal to 的简写，也就是小于或等于的意思。
lt ：就是 Less than 的简写，也就是小于的意思。
gte：就是 Greater than or equal to 的简写，也就是大于或等于的意思。
gt ：就是 Greater than 的简写，也就是大于的意思。
! ：就是不等于的意思，跟 javascript 里的不等于判断符相同，^0^
也写几条例句吧：
引用:
<!--[if gt IE ]> / 如果 IE 版本大于 /
<!--[if lte IE 6]> / 如果 IE 版本小于等于 6 /
<!--[if !IE]> / 如果浏览器不是 IE /
......
看到这里相信大家都已经明白了条件注释的用法了，OK，那来举个例子吧：
<!-- 默认先调用 样式表 -->
<link rel="stylesheet" type="text/css" href="" />
<!--[if !IE]>
<!-- 非 IE 下调用 样式表 -->
<link rel="stylesheet" type="text/css" href="" />
<![endif]-->
<!--[if lt IE 6]>
<!-- 如果 IE 浏览器版本小于 6,调用 样式表 -->
<link rel="stylesheet" type="text/css" href="" />
<![endif]-->
详细使用方法已经介绍完了，不得不提的一点就是：
条件注释是在 以后才被 IE 支持的，对于 IE5 以前的浏览器是无效的，不过，
应该没什么人还在使用 IE4 的版本了吧。^0^
浏览器的条件注释理论，用下面一段例子来解释这个问题
(X)HTML
下面一段代码是测试在微软的 IE 浏览器下的条件注释语句的效果
引用:
<!--[if IE]>
<h1>您正在使用 IE 浏览器</h1>
<![endif]-->
<!--[if IE 5]>
<h1>版本 5</h1>
<![endif]-->
<!--[if IE ]>
<h1>版本 </h1>
<![endif]-->
<!--[if IE ]>
<h1>版本 </h1>
<![endif]-->
<!--[if IE 6]>
<h1>版本 6</h1>
<![endif]-->
<!--[if IE 7]>
<h1>版本 7</h1>
<![endif]-->
下面的代码是在非 IE 浏览器下运行的条件注释
引用:
<!--[if !IE]><!-->
<h1>您使用不是 Internet Explorer</h1>
<!--<![endif]-->
最终在非 IE 和特殊的 IE 浏览器下起作用
(或者使用 lte lt 或者 gt gte 来判断，如：
引用:
<!--[if lte IE 6]>
在 IE 6 下显示的信息
<![endif]-->
).
<!--[if IE 6]><!-->
<h1>您正在使用 Internet Explorer version 6<br />
或者 一个非 IE 浏览器</h1>
<!--<![endif]-->
From ：
target="_blank">
上面提到了条件注释，就是判断浏览器类型，然后定义什么浏览器下显示什么内容。
这个 dropmenu（下拉菜单）模型来自 cssplay，使经过作者多次的研究和反复的测试才
做出来的。我想那这个模型来实践一下条件注释的原理。
先看一个最简单的模型
下面是 xhtm
引用:
<div class="menu">
<ul>
<li><a class="drop" href="../menu/">DEMOS
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--IE7 时显示</a>标签-->
<table><tr><td>
<ul>
<li><a href="../menu/" title="The zero dollar ads page">zero dollars
advertising page</a></li>
<li><a href="../menu/" title="Wrapping text around images">wrapping text around
images</a></li>
<li><a href="../menu/" title="Styling forms">styled form</a></li>
<li><a href="../menu/" title="Removing active/focus borders">active
focus</a></li>
<li><a class="drop" href="../menu/" title="Hover/click with no active/focus
borders">hover/click with no borders</li>
<li class="upone"><a href="../menu/" title="Multi-position drop
shadow">shadow boxing</a></li>
<li><a href="../menu/" title="Image Map for detailed information">image
map for detailed information</a></li>
<li><a href="../menu/" title="fun with background images">fun with background
images</a></li>
<li><a href="../menu/" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/" title="em size images compared">em image sizes
compared</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<!--IE6 时显示</a>标签-->
</ul>
</div>
CSS
<link rel="stylesheet" media="all" type="text/css" href="" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="" />
<![endif]-->
采用双样式，给 ie 和非 ie 分别定义样式，如果 IE 时候，在 基础上补充一
个
先看看非 ie 下的 css 是怎样定义的
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color:#fff;
background:#bd8d5e;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:3em;
margin-top:1px;
left:0;
width:150px;
}
在非 IE 下，看到鼠标滑过时候 li 包含的 ul 显示了，因为这些浏览器支持 li:hover 用法
IE 下的 css
.menu ul li a:hover {
color:#fff;
background:#bd8d5e;
}
.menu ul li a:hover ul {
display:block;
position:absolute;
top:3em;
left:0;
background:#fff;
margin-top:0;
margin-top:1px;
}
继承上面的 样式，无鼠标时间时候 li 包含的 ul 不显示
因为
<!--[if lte IE 6]>
</a>
<![endif]-->
IE 与 Firefox 的 CSS 兼容大全-Web 标准教程
来源： 作者： 时间：2008-01-31 收藏 推荐 评论 打印 点击： 17 CSS 对浏览器器的
兼容性具有很高的价值，通常情况下 IE 和 Firefox 存在很大的解析差异，这里介绍一下兼容
要点。
__艺酷吧
艺酷吧-ECoo8__com
常见兼容问题：
艺酷吧--ecoo8_COm
_COM
1、DOCTYPE 影响 CSS 处理
ecoo8@COM
2、FF：div 设置 margin-left， margin-right 为 auto 时已经居中，IE 不行
_COM
3、FF: body 设置 text-align 时， div 需要设置 margin: auto(主要是 margin-left，
margin-right) 方可居中 艺酷吧--ecoo8_COm
4、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important
多设一个 height 和 width
_COM
艺酷吧--ecoo8_COm
5、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 非凡设置样式
-艺酷吧
6 、 div 的 垂 直 居 中 问 题 : vertical-align:middle; 将 行 距 增 加 到 和 整 个 DIV 一 样 高
line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
ecoo8@COM
7、cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
_COM
8、FF: 链接加边框和背景色，需设置 display: block， 同时设置 float: left 保证不换行。
参照 menubar， 给 a 和 menubar 设置高度是为了避免底边显示错位， 若不设 height，
可以在 menubar 中插入一个空格。
__COM
ecoo8_COM
9、在 mozilla firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px 解决方法：
ecoo8@COM
div{margin:30px!important;margin:28px;}
艺酷吧
注重这两个 margin 的顺序一定不能写反，据阿捷的说法!important 这个属性 IE 不能识
别，但别的浏览器可以识别。所以在 IE 下其实解释成这样：
艺酷吧-ecoo8.-COM
__艺酷吧
div{maring:30px;margin:28px}
_COM
重 复 定 义 的 话 按 照 最 后 一 个 来 执 行 ， 所 以 不 可 以 只 写 margin:XXpx!important;
_COM
10、IE5 和 IE6 的 BOX 解释不一致 艺酷吧
IE5 下
ecoo8_coM
__艺酷吧
div{width:300px;margin:0 10px 0 10px;}
_COM
__艺酷吧
div 的宽度会被解释为 300px-10px(右填充)-10px(左填充)最终 div 的宽度为 280px，而
在 IE6 和其他浏览器上宽度则是以 300px 10px(右填充) 10px(左填充)=320px 来计算的。这时
我们可以做如下修改 _COM
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
ecoo8@COM
关于这个/**/是什么我也不太明白，只知道 IE5 和 firefox 都支持但 IE6 不支持。
__艺酷吧
11、ul 标签在 Mozilla 中默认是有 padding 值的，而在 IE 中只有 margin 有值所以先定
义
_COM
艺酷吧
ul{margin:0;padding:0;}
_COM
就能解决大部分问题 _COM
注重事项：
ecoo8____COM
-艺酷吧
1、float 的 div 一定要闭合。
ecoo8____COM
例如：(其中 floatA、floatB 的属性已经设置为 float:left;)
_COM
<#div id="floatA" ></#div> 艺酷吧
<#div id="floatB" ></#div> 艺酷吧--ecoo8_COm
<#div id="NOTfloatC" ></#div>
-艺酷吧
艺酷吧-ECoo8__com
这里的 NOTfloatC 并不希望继续平移，而是希望往下排。
艺酷吧--ecoo8_COm
艺酷吧--ecoo8_COm
这段代码在 IE 中毫无问题，问题出在 FF。原因是 NOTfloatC 并非 float 标签，必须将
float 标签闭合。
ecoo8_COM
在
_COM
-艺酷吧
<#div class="floatB"></#div>
ecoo8____COM
<#div class="NOTfloatC"></#div>
ecoo8_COM
之间加上
_COM
<#div class="clear"></#div>
ecoo8---Com-艺酷吧
ecoo8_coM
这个 div 一定要注重声明位置，一定要放在最恰当的地方，而且必须与两个具有 float
属性的 div 同级，之间不能存在嵌套关系，否则会产生异常。
_COM
并且将 clear 这种样式定义为为如下即可：
_COM
.clear{
艺酷吧--ecoo8_COm
clear:both;} 艺酷吧-ecoo8.-COM
此外，为了让高度能自动适应，要在 wrapper 里面加上 overflow:hidden;
艺酷吧
当包含 float 的 box 的时候，高度自动适应在 IE 下无效，这时候应该触发 IE 的 layout
私有属性(万恶的 IE 啊！)用 zoom:1;可以做到，这样就达到了兼容。 _COM
例如某一个 wrapper 如下定义：
艺酷吧-ecoo8.-COM
以下为引用的内容：
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
艺酷吧-ecoo8.-COM
_COM
2、margin 加倍的问题。 __艺酷吧
设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6 都存在的 bug。
ecoo8_coM
解决方案
-艺酷吧
是在这个 div 里面加上 display:inline; __COM
例如：
艺酷吧-ecoo8.-COM
<#div id="imfloat"></#div>
艺酷吧-ECoo8__com
ecoo8---Com-艺酷吧
相应的 css 为
ecoo8_coM
艺酷吧-ECoo8__com
以下为引用的内容：
#IamFloat{
float:left;
margin:5px;/*IE 下理解为 10px*/
display:inline;/*IE 下再理解为 5px*/}
ecoo8---Com-艺酷吧
3、关于容器的包涵关系
_COM
ecoo8____COM
很多时候，尤其是容器内有平行布局，例如两、三个 float 的 div 时，宽度很轻易出现
问题。在 IE 中，外层的宽度会被内层更宽的 div 挤破。一定要用 Photoshop 或者 Firework
量取像素级的精度。 -艺酷吧
4、关于高度的问题
艺酷吧--ecoo8_COm
艺酷吧
假如是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而假如是静态的
内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
ecoo8@COM
艺酷吧--ecoo8_COm
5、最狠的手段 - !important; __艺酷吧
假如实在没有办法解决一些细节问题，可以用这个方法.FF 对于"!important"会自动优先
解析，然而 IE 则会忽略。如下 _COM
以下为引用的内容：
.tabd1{
background:url(/res/images/up/) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/) no-repeat 1px 0px; /* Style for IE */}
-艺酷吧
_COM
值得注重的是，一定要将 xxxx !important 这句放置在另一句之上，上面已经提过
undefined undefined
让 CSS 兼容 IE 和 Firefox 的技巧集合
作者：佚名 来源：绿色软件下载站 发布时间：2008-12-20 18:00:13 减小字体 增大
字体
（您可以通过本站搜索直接下载该软件)
CSS 对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉
得也不是难事，从网上收集了 IE7,6 与 Fireofx 的兼容性处理方法并整理了一下。对于
的过度，请尽量用 xhtml 格式写代码，而且 DOCTYPE 影响 CSS 处理，作为 W3C
的标准，一定要加 DOCTYPE 声明。
CSS 技巧
的垂直居中问题
vertical-align:middle; 将行距增加到和整个 DIV 一样高 line-height:200px; 然后插入
文字，就垂直居中了。缺点是要控制内容不要换行
2. margin 加倍的问题
设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6 都存在的 bug。解
决方案是在这个 div 里面加上 display:inline;
例如：
＜#div id=”imfloat”>
相应的 css 为
#imfloat{
float:left;
margin:5px;/*IE 下理解为 10px*/
display:inline;/*IE 下再理解为 5px*/}
3.浮动 ie 产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下 IE 会产生 200px
的距离 display:inline; //使浮动忽略}
这里细说一下 block 与 inline 两个元素：block 元素的特点是,总是在新行上开始,高
度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控
制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排
列的效果 diplay:table;
4 IE 与宽度和高度的问题
IE 不认得 min-这个定义，但实际上它把正常的 width 和 height 当作有 min 的情况
来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只
用 min-width 和 min-height 的话，IE 下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto;
min-width: 80px; min-height: 35px;}
5.页面的最小宽度
min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，
这样就能保证排版一直正确。但 IE 不认得这个，而它实际上把 width 当做最小宽度来使。
为了让这一命令在 IE 上也能用，可以把一个＜div> 放到 ＜body> 标签下，然后为 div 指
定一个类,然后 CSS 这样设计：
#container{ min-width: 600px; width:expression( ＜ 600?
"600px": "auto" );}
第一个 min-width 是正常的；但第 2 行的 width 使用了 Javascript，这只有 IE 才认
得，这也会让你的 HTML 文档不太正规。它实际上通过 Javascript 的判断来实现最小宽度。
浮动 IE 文本产生 3 象素的 bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有
3px 的间距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
＜div id="box">
＜div id="left">＜/div>
＜div id="right">＜/div>
＜/div>
捉迷藏的问题
当 div 应用复杂的时候每个栏中又有一些链接，DIV 等这个时候容易发生捉迷藏的
问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：
对#layout 使用 line-height 属性 或者给#layout 使用固定高和宽。页面结构尽量简单。
的 div 闭合;清除浮动;自适应高度;
①例如：＜#div id=”floatA” >＜#div id=”floatB” >＜#div id=”NOTfloatC” >这里的
NOTfloatC 并不希望继续平移，而是希望往下排。(其中 floatA、floatB 的属性已经设置为
float:left;)
这段代码在 IE 中毫无问题，问题出在 FF。原因是 NOTfloatC 并非 float 标签，必
须将 float 标签闭合。在 ＜#div class=”floatB”> ＜#div class=”NOTfloatC”>之间加上 ＜#div
class=”clear”>这个 div 一定要注意位置，而且必须与两个具有 float 属性的 div 同级，之间不
能 存 在 嵌 套 关 系 ， 否 则 会 产 生 异 常 。 并 且 将 clear 这 种 样 式 定 义 为 为 如 下 即
可： .clear{ clear:both;}
①作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在 wrapper
里面加上 overflow:hidden; 当包含 float 的 box 的时候，高度自动适应在 IE 下无效，这时候
应该触发 IE 的 layout 私有属性(万恶的 IE 啊！)用 zoom:1;可以做到，这样就达到了兼容。
例如某一个 wrapper 如下定义：
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
①对于排版,我们用得最多的 css 描述可能就是 float:left.有的时候我们需要在 n 栏
的 float div 后面做一个统一的背景,譬如:
＜div id=”page”>
＜div id=”left”>＜/div>
＜div id=”center”>＜/div>
＜div id=”right”>＜/div>
＜/div>
比如我们要将 page 的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,
但是我们会发现随着 left center right 的向下拉长,而 page 居然保存高度不变,问题来了,原因
在于 page 不是 float 属性,而我们的 page 由于要居中,不能设置成 float,所以我们应该这样解
决
＜div id=”page”>
＜div id=”bg” style=”float:left;width:100%”>
＜div id=”left”>＜/div>
＜div id=”center”>＜/div>
＜div id=”right”>＜/div>
＜/div>
＜/div>
再嵌入一个 float left 而宽度是 100%的 DIV 解决之
①万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以
下代码加入 Global CSS 中,给需要闭合的 div 加上 class="clearfix" 即可,屡试不爽.
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
8．高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当
内层对象使用 margin 或 paddign 时。
例：
#box {backgr ound-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
＜div id="box">
＜p>p 对象中的内容＜/p>
＜/div>
解 决 方 法 ： 在 P 对 象 上 下 各 加 2 个 空 的 div 对 象 CSS 代
码：.1{height:0px;overflow:hidden;}或者为 DIV 加上 border 属性。
10 .IE6 下为什么图片下有空隙产生
解决这个 BUG 的方法也有很多 ,可以是改变 html 的排版 ,或者设置 img 为
display:block 或 者 设 置 vertical-align 属 性 为 vertical-align:top bottom middle
text-bottom 都可以解决.
11.如何对齐文本与文本输入框
加上 vertical-align:middle;
＜style type="text/css">
＜!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
＜/style>
标准中定义 id 与 class 有什么区别吗
一.web 标准中是不容许重复 ID 的,比如 div id="aa" 不容许重复 2 次,而 class 定义
的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题
ID 的优先级要高于 class,看上面的例子
三.方便 JS 等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他
定义一个 ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资
源,远远不如一个 ID 来得简单.
13. LI 中内容超过长度后以省略号显示的方法
此方法适用与 IE 与 OP 浏览器
＜style type="text/css">
＜!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
＜/style>
14.为什么 web 标准中 IE 无法设置滚动条颜色了
解决办法是将 body 换成 html
＜ !DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN"
"
＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
＜style type="text/css">
＜!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
＜/style>
15.为什么无法定义 1px 左右高度的容器
IE6 下 这 个 问 题 是 因 为 默 认 的 行 高 造 成 的 , 解 决 的 方 法 也 有 很 多 , 例
如:overflow:hidden zoom: line-height:1px
16.怎么样才能让层显示在 FLASH 之上呢
解决的办法是给 FLASH 设置透明
＜param name="wmode" value="transparent" />
17.怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度
除以二
＜style type="text/css">
＜!--
div {
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
＜/style> FF 与 IE
1. Div 居中问题
div 设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE 需要设定 body
居中，首先在父级元素定义 text-algin: center;这个的意思就是在父级元素内的内容居中。
2.链接(a 标签)的边框与背景
a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以
在 menubar 中插入一个空格。
3.超链接访问过后 hover 样式就不出现的问题
被点击访问过的超链接样式不在具有 hover 和 active 了,很多人应该都遇到过这个
问题,解决方法是改变 CSS 属性的排列顺序: L-V-H-A
Code:
＜style type="text/css">
＜!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
＜/style>
4. 游标手指 cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
的 padding 与 margin
ul 标签在 FF 中默认是有 padding 值的,而在 IE 中只有 margin 默认有值,所以先定
义 ul{margin:0;padding:0;}就能解决大部分问题
6. FORM 标签
这个标签在 IE 中,将会自动 margin 一些边距,而在 FF 中 margin 则是 0,因此,如果想
显示一致,所以最好在 css 中指定 margin 和 padding,针对上面两个问题,我的 css 中一般首先
都使用这样的样式 ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.
7. BOX 模型解释不一致问题
在 FF 和 IE 中 的 BOX 模 型 解 释 不 一 致 导 致 相 差 2px 解 决 方 法 ：
div{margin:30px!important;margin:28px;} 注 意 这 两 个 margin 的 顺 序 一 定 不 能 写 反 ，
important 这个属性 IE 不能识别，但别的浏览器可以识别。所以在 IE 下其实解释成这样：
div{maring:30px;margin:28px} 重 复 定 义 的 话 按 照 最 后 一 个 来 执 行 ， 所 以 不 可 以 只 写
margin:xx px!important;
#box{ width:600px; //for - w\idth:500px; //for ff+}
#box{ width:600px!important //for ff width:600px; //for ff+ width /**/:500px; //for
-}
8.属性选择器(这个不能算是兼容,是隐藏 css 的一个 bug)
p[id]{}div[id]{}
这个对于 和 以下的版本都隐藏,FF 和 OPera 作用.属性选择器和子选择
器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如 p[id]中,所
有 p 标签中有 id 的都是同样式的.
9.最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF 对于”!important”会自动
优先解析,然而 IE 则会忽略.如下
.tabd1{
background:url(/res/images/up/) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将 xxxx !important 这句放置在另一句之上，上面已经提过
,FF 的默认值问题
或许你一直在抱怨为什么要专门为 IE 和 FF 写不同的 CSS，为什么 IE 这样让人头
疼，然后一边写 css，一边咒骂那个可恶的 M$ IE.其实对于 css 的标准支持方面，IE 并没有
我们想象的那么可恶，关键在于 IE 和 FF 的默认值不一样而已，掌握了这个技巧，你会发
现写出兼容 FF 和 IE 的 css 并不是那么困难，或许对于简单的 css，你完全可以不用&r
dquo;!important”这个东西了。
我们都知道，浏览器在显示网页的时候，都会根据网页的 css 样式表来决定如何显
示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，
所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果
你没有在 css 中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div 或者其他元素
的背景，如果在 css 中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的
样式均如此。所以有很多东西出现 FF 和 IE 显示不一样的根本原因在于它们的默认显示不
一样，而这个默认样式该如何显示我知道在 w3 中有没有对应的标准来进行规定，因此对于
这点也就别去怪罪 IE 了。
11.为什么 FF 下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象 IE6 里那样被撑开的,那我又想固定高度,
又想能被撑开需要怎样设置呢？办法就是去掉 height 设置 min- height:200px; 这里为了照顾
不认识 min-height 的 IE6 可以这样定义:
{
height:auto!important;
height:200px;
min-height:200px;
}
下如何使连续长字段自动换行
众所周知 IE 中直接使用 word-wrap:break-word 就可以了, FF 中我们使用 JS 插入
的方法来解决
＜style type="text/css">
＜!--
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
-->
＜/style>
＜div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa＜/div>
＜scrīpt type="text/javascrīpt">
/* ＜![CDATA[ */
function toBreakWord(el, intLen){
var ōbj=(el);
var strContent=;
var strTemp="";
while(>intLen){
strTemp+=(0,intLen)+"
";
strContent=(intLen,);
}
strTemp+="
"+strContent;
=strTemp;
}
if( && !) toBreakWord("ff", 37);
/* ]]> */
＜/scrīpt> 13.为什么 IE6 下容器的宽度和 FF 解释不同呢
＜?xml version="" encoding="gb2312"?>
＜ !DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN"
"
＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
＜style type="text/css">
＜!--
div {
cursor:pointer;
width:200px;
height:200px;
border:10px solid red
}
-->
＜/style>
＜div ōnclick="alert()">让 FireFox 与 IE 兼容＜/div>
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里 IE6
解释为 200PX ,而 FF 则解释为 220PX,那究竟是怎么导致的问题呢？大家把容器顶部的 xml
去掉就会发现原来问题出在这 ,顶部的申明触发了 IE 的 qurks mode,关于 qurks mode、
standards mode 的相关知识 ,请参考:
/
IE6,IE7,FF
出来了，对 CSS 的支持又有新问题。浏览器多了，网 Bpx; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。
这样也属于 CSS HACK，不过没有上面这样简洁。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
第二种，是使用 IE 专用的条件注释
＜!--其他浏览器 -->
＜link rel="stylesheet" type="text/css" href="" />
＜!--[if IE 7]>
＜!-- 适合于 IE7 -->
＜link rel="stylesheet" type="text/css" href="" />
＜![endif]-->
＜!--[if lte IE 6]>
＜!-- 适合于 IE6 及一下 -->
＜link rel="stylesheet" type="text/css" href="" />
＜![endif]-->
第三种，css filter 的办法，以下为经典从国外网站翻译过来的。.
新建一个 css 样式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个 div,并使用前面定义的 css 的样式：
＜div id="item">some text here＜/div>
在 body 表现这里加入 lang 属性,中文为 zh：
＜body lang="en">
现在对 div 元素再定义一个样式：
*:lang(en) #item{
background:green !important;
}
这样做是为了用!important 覆盖原来的 css 样式,由于:lang 选择器 并不支持,所
以对这句话不会有任何作用,于是也达到了 下同样的效果,但是很不幸地的是,safari 同
样不支持此属性,所以需要加入以下 css 样式：
#item:empty {
background: green !important
}
:empty 选择器为 css3 的规范,尽管 safari 并不支持此规范,但是还是会选择此元素,不管
是否此元素存在,现在绿色会现在在除 ie 各版本以外的浏览器上。
对 IE6 和 FF 的兼容可以考虑以前的!important 个人比较喜欢用第一种，简洁，兼
容性比较好。
IE 与 Firefox 的 CSS 兼容大全
2008 年 07 月 19 日 星期六 08:55 对浏览器器的兼容性具有很高的价值，通常
情况下 IE 和 Firefox 存在很大的解析差异，这里介绍一下兼容要点。
常见兼容问题：
影响 CSS 处理
: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
: body 设 置 text-align 时 , div 需 要 设 置 margin: auto( 主 要 是
margin-left,margin-right) 方可居中
: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important
多设一个 height 和 width
: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
的垂直居中问题 : vertical-align:middle; 将行距增加到和整个 DIV 一样高
line-height:200px; 然后插入文字，就垂直居中了缺点是要控制内容不要换行
: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换
行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height,
可以在 menubar 中插入一个空格。
9.在 mozilla firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px 解决方法：
div{margin:30px!important;margin:28px;}
注意这两个 margin 的顺序一定不能写反，据阿捷的说法!important 这个属性 IE 不
能识别，但别的浏览器可以识别。所以在 IE 下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写 margin:XXpx!important;
和 IE6 的 BOX 解释不一致
IE5 下
div{width:300px;margin:0 10px 0 10px;}
div 的宽度会被解释为 300px-10px(右填充)-10px(左填充)最终 div 的宽度为 280px，
而在 IE6 和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px 来计算的。
这时我们可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
关于这个/**/是什么我也不太明白，只知道 IE5 和 firefox 都支持但 IE6 不支持，如
果有人理解的话，请告诉我一声，谢了！：）
标签在 Mozilla 中默认是有 padding 值的,而在 IE 中只有 margin 有值所以先
定义
ul{margin:0;padding:0;}
就能解决大部分问题
注意事项：
1、float 的 div 一定要闭合。
例如：(其中 floatA、floatB 的属性已经设置为 float:left;)
<#div id="floatA" ></#div>
<#div id="floatB" ></#div>
<#div id="NOTfloatC" ></#div>
这里的 NOTfloatC 并不希望继续平移，而是希望往下排。
这段代码在 IE 中毫无问题，问题出在 FF。原因是 NOTfloatC 并非 float 标签，必
须将 float 标签闭合。
在
<#div class="floatB"></#div>
<#div class="NOTfloatC"></#div>
之间加上
<#div class="clear"></#div>
这个 div 一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有
float 属性的 div 同级，之间不能存在嵌套关系，否则会产生异常。
并且将 clear 这种样式定义为为如下即可：
.clear{
clear:both;}
此外，为了让高度能自动适应，要在 wrapper 里面加上 overflow:hidden;
当包含 float 的 box 的时候，高度自动适应在 IE 下无效，这时候应该触发 IE 的
layout 私有属性(万恶的 IE 啊！)用 zoom:1;可以做到，这样就达到了兼容。
例如某一个 wrapper 如下定义：
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、margin 加倍的问题。
设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6 都存在的 bug。
解决方案是在这个 div 里面加上 display:inline;
例如：
<#div id="imfloat"></#div>
相应的 css 为
#IamFloat{
float:left;
margin:5px;/*IE 下理解为 10px*/
display:inline;/*IE 下再理解为 5px*/}
3、关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个 float 的 div 时，宽度很容易
出现问题。在 IE 中，外层的宽度会被内层更宽的 div 挤破。一定要用 Photoshop 或者 Firework
量取像素级的精度。
4、关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静
态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
5、最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF 对于"!important"会自动
优先解析,然而 IE 则会忽略.如下
.tabd1{
background:url(/res/images/up/) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将 xxxx !important 这句放置在另一句之上，上面已经提过
Firefox、IE 对 CSS 的兼容性整理
1、firefox 和 IE 对某些 css 样式的认定有不少区别，包括：
ul 和 ol 的默认 padding 值是不一样的，在 Firefox 中，padding-left 默认值为 40px 左右，
而 IE 中为 0，一般设置 ul{margin:0;padding:0;}就能解决大部分问题。
并列排列的多个元素（图片或者链接）的代码中的空格和回车会造成元素之间的间隙，
而在 firefox 中和 IE 中显示是不一样的，IE 显示空格（约 8px）、firefox 显示空格（约 4px）。
对不规范代码的兼容情况不同，IE 中漏掉的关闭符号对显示不造成影响，而 firefox 中
就会形成错乱的布局。
firefox 对于宽高尺寸的严格解析会造成与设置不匹配（超出）的图片或表格将原设置
div 撑大。
未定义 id 的 div，在 IE 中会与 div 属性中的其他设置有关，而在 firefox 中的位置会于
div 在文件中位置有关，紧随前一个 div 出现。
设置为 float 的 div 在 ie 下设置的 margin 会加倍的，特别是 margin-left，这是 ie6 的一
个 bug。解决的方法是在这个 div 里面加上 display:inline;
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的
内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
FF: div 设置 margin-left, margin-right 为 auto 时已经居中 , IE 不行。 IE 里设置
text-align:center，就居中了，但在 FF 中不行。所以一般两个都要设置。
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important
多设一个 height 和 width
FF 对于"!important"会自动优先解析,然而 IE 则会忽略.如下
.tabd{
background:url(/res/images/up/) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/) no-repeat 1px 0px; /* Style for IE */
}
FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
2、针对 firefox ie6 ie7 的 css 样式
现在大部分都是用!important 来 hack，对于 ie6 和 firefox 测试可以正常显示，
但是 ie7 对!important 可以正确解释，会导致页面没按要求显示！找到一个针
对 IE7 不错的 hack 方式就是使用“*+html”，现在用 IE7 浏览一下，应该没有问题了。
现在写一个 CSS 可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在 firefox 下字体颜色显示为#333，IE6 下字体颜色显示为#666，IE7 下字体颜色显
示为#999。
3、firefox 下多层嵌套时内层设置了浮动外层设置背景时背景不显示
这主要是内层设置浮动后外层高度在 firefox 下变为 0，所以应该在外层与内层间再嵌一
层，设置浮动和宽
度，然后给这个层设置背景（听说还有其他方法，感觉还是这方法好使）
4、属性选择器(这个不能算是兼容,是隐藏 css 的一个 bug
p[id]{}div[id]{}
这个对于 和 以下的版本都隐藏,FF 和 OPera 作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的
范围比较大,如 p[id]中,所有 p 标签中有 id 的都是同样式的.
5、嵌套 DIV:父 DIV 的高度不能根据子 DIV 自动变化的解决方案
<div id="parent">
<div id="content"> </div>
</div>
当 Content 内容多时，即使 parent 设置了高度 100%或 auto,在不同浏览器下还是不能完
好的自动伸展。 解决方案
<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
在层的最下方产生一个高度为 1 的空格，可解除这个问题
纯 CSS 制作支持 IE6、IE7、Firefox 的下拉菜单
2009 年 06 月 20 日 星期六 11:03<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
Strict//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title>纯 CSS 的下拉菜单 支持 IE6 IE7 Firefox</title>
<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px
10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li
a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}
.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href=" 菜单</a></li>
<li><a href="
<li><a href="
<li><a href="
<li><a href=" 特效欣赏专题</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href=" 艺术
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="
<li><a href="
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="
<li><a href="
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="
<li><a href="
<li><a href="
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="
<li><a href="
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="
<li><a href="
<li><a href="
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
IE Bug,div+css 之常见问题,IE 与 Firefox 的 CSS 兼容大全
...整理 2009 年 04 月 09 日 星期四 14:53 图文混排 容易导致 扩展框问题.
<div><img src="images/" />扩展框问题</div>
这样排版容易导致 扩展框问题.
尽量定义宽高给定值
* 浮动下降问题
加上 ｛float：left；｝ 即可```
IE6 的双倍边距 BUG
解决办法是加上 display:inline
IE6 下为什么图片下方有空隙产生
解 决 这 个 BUG 的 方 法 也 有 很 多 ， 可 以 是 改 变 html 的 排 版 ， 或 者 设 置 img 为
display:block 或者设置 vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都
可以解决.
IE6 下这两个层中间怎么有间隙
这个 IE 的 3PX BUG 也是经常出现的，解决的办法是给.right 也同样浮动 float:left 或者
相对 IE6 定义.left
如何对齐文本与文本输入筐
遇到此种问题，设置文本框的 vertical-align:middle 就可以了
为什么 FF 下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象 IE6 里那样被撑开的,那我又想固定高度，又
想能被撑开需要怎样设置呢？办法就是去掉 height 设置 min-height:200px; 这里为了照顾不
认识 min-height 的 IE6 可以这样定义：
{
height:auto!important;
height:200px;
min-height:200px;
}
怎么样才能让层显示在 FLASH 之上呢
解 决 的 办 法 是 给 FLASH 设 置 透 明 <param value="transparent" /> 或 者 <param
value="opaque" />
怎样使一个层垂直居中于浏览器中
使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二.
方法二:首先在父级元素定义 TEXT-ALIGN: center;这个的意思就是在父级元素内的内
容居中；对于 IE 这样设定就已经可以了。
但 在 mozilla 中 不 能 居 中 。 解 决 办 法 就 是 在 子 元 素 定 义 时 候 设 定 时 再 加 上
“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个 DIV 里，
你可以依次拆出多个 div，
只要在每个拆出的 div 里定义 MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
{
width:300px;
margin-left:auto;
margin-right:auto;
}
针对 firefox ie6 ie7 的 css 样式
现在大部分都是用!important 来 hack，对于 ie6 和 firefox 测试可以正常显示，
但是 ie7 对!important 可以正确解释，会导致页面没按要求显示！找到一个针
对 IE7 不错的 hack 方式就是使用“*+html”，现在用 IE7 浏览一下，应该没有问题了。
现在写一个 CSS 可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在 firefox 下字体颜色显示为#333，IE6 下字体颜色显示为#666，IE7 下字体颜色显
示为#999。
页面的最小宽度
min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样
就能保证排版一直正确。但 IE 不认得这个，
而它实际上把 width 当做最小宽度来使。为了让这一命令在 IE 上也能用，可以把一个
<div> 放到 <body> 标签下，然后为 div 指定一个类：
然后 CSS 这样设计：
#container{ min-width: 600px; width:expression( < 600?
"600px": "auto" );}
第一个 min-width 是正常的；但第 2 行的 width 使用了 Javascript，这只有 IE 才认得，
这也会让你的 HTML 文档不太正规。它实际上通过 Javascript 的判断来实现最小宽度。
属性选择器(这个不能算是兼容,是隐藏 css 的一个 bug)
p[id]{}div[id]{}
这个对于 和 以下的版本都隐藏,FF 和 OPera 作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的
范围比较大,如 p[id]中,所有 p 标签中有 id 的都是同样式的.
最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF 对于”!important”会自动优先
解析,然而 IE 则会忽略.
关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个 float 的 div 时，宽度很容易出现
问题。在 IE 中，外层的宽度会被内层更宽的 div 挤破。一定要用 Photoshop 或者 Firework
量取像素级的精度。
1.写两句代码来控制一个属性，区别 Firefox 与 IE：
background:orange; *background:green;
//这一句代码写出来时，你用 Firefox 浏览，会发现背景是橙色的，而 IE 里却是绿色的，
很 简 单 ， 因 为 Firefox 不 能 识 别 * ， 而 IE6 ， IE7 都 可 以 识 *, 标 准 浏 览 器 ( 如
Firefox,Opera,Netscape)不能识别*;。
2.写两句代码来控制一个属性，区别 IE7 与 IE6：
background:green !important;background:blue;
// 这一句代码写出来时，你用 IE7 浏览，会发现，写了该代码的区域背景是绿色的，如
果用 IE6 浏览，却是蓝色的，这是因为 IE7 能识别!important*，一但识别了，就执行，忽略
了后面的那一句，但 IE6 却不能识别!important，所以前面部分跳过，直接执行了后半部份.
3.写三句代码来控制一个属性，区别 Firefox，IE7，IE6：
background:orange;*background:green !important;*background:blue;
// 这一句会使在 Firefox 在，背景呈橙色，IE7 中为绿色，IE6 中为蓝色，道理和前面一
样，Firefox 不能识别*，所以后面两句都不执行，直接执行第一句，IE7 当然也能执行第一
行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，
而最后一句，IE7 是不能识别的。IE6 不能识别!imprtant，本来运行了第一句代码了，第二
句不能识别，那就理所当然的执行了最后一句。
注：IE 都能识别*;标准浏览器(如 Firefox,Opera,Netscape)不能识别*；IE6 能识别*，但
不能识别 !important,IE7 能识别*，也能识别!important;FF 不能识别*，但能识别!important;
2009 年 06 月 03 日 星期三 20:11
基本 HTML 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN"
"
<html xmlns=" >
<head>
<title>Div Float Sample</title>
<style type="text/css">
div { margin:3px; }
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }
</style>
</head>
<body>
<div class="d1">
<div class="d2"> </div>
<div class="d3"> </div>
</div>
</body>
</html>
以上代码显示的结果如下，很正常，结果相同。
下面会在这个基础上进行修改，修改的内容都在 style 中，其他代码就不再重复写了。
请注意，这里的 Style 中用到了 min-height，这个和 height 是不同的，min-height 指定了对象的一个
最小高度，当对象的子内容高度超过这个最小高度是，这个对象会自动撑大。这是一个非常牛的
style，可惜的是，在这个 style 和 float 这个同样牛的 style 一起使用的时候，就会出现各种问题。
内部一个 Div 修改成为 float:left
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }
显示结果如下。
这个结果中，Firefox 有点离谱了，两个框叠在一起也就罢了，为什么那个红框会变大捏？而且变
的大小也很诡异，不知道是按照什么公式计算出来的。IE 在这里的显示应当是附和标准的。
内部两个 Div 都修改成为 float:left
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }
显示结果如下。
在这种情况下，Firefox 的结果尚能解释，可能是 float 把外层的 Div 也作为内层 float 影响的范围，
这样内层的就不会将外层的 Div 撑大了。IE 在这里出现了 Margin 失效的情况，可以解释为内层第
二个 float 造成了影响。
干脆把外层的 Div 也修改成为 float:left
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }
显示结果如下，
这种情况下，Firefox 正常了，而 IE 延续了前面的不正常情况。
外层是 float:left，内层最后一个不再 float:left
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }
显示结果如下，
这和前面第一种加 float:left 的情况相同。
结论
再重申一次，本文讨论的是一个比较高级的话题。如果在 style 中用 height 而不是 min-height 来设
定高度，是不会出现以上这些问题的。不过，不用 min-height 就失去了 div 自动撑大这一个很有必
要的特性。
在 min-height 和 float:left 的情况下，没有一种完美的写法让 Firefox 和 IE 结果相同。不过仍然可以
发现绕开的方法。
进一步试验可以发现，margin 遭到的影响在 padding 上比较好，所以最好是 padding 和 margin 都不
用，或者只用 padding。
两者相同的代码如下，
div { padding:3px; }
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }
显示结果如下，
呵呵，总算是一样了，虽然是凑合着一样了。幸好一样了，否则只好用 table 了。
当然所有这些情况也许是有合理解释的，说不定增加某一个 style 的设置，这些问题都迎刃而解了，
不过目前我还没有找到这个设置。
关于 Doctype
以上代码在下面这些 Doctype 下试验过，结果相同。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML Transitional//EN"
"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN"
"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN"
"
IE6、IE7、Firefox 之间的兼容写法
2009 年 05 月 27 日 星期三 18:32IE6、IE7、Firefox 之间的兼容写法
因为不同浏览器对 W3C 标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相
同，比如 IE 在很多情况下就与 FF 存在 3px 的差距，对于这些差异性，就需要利用 css 的 hack
来进行调整，当然在没有必要的情况下，最好不要写 hack 来进行调整，避免因为 hack 而导
致页面出现问题。
1、 IE6、IE7、Firefox 之间的兼容写法：
写法一：
IE 都能识别*;标准浏览器(如 FF)不能识别*；
IE6 能识别*，但不能识别 !important,
IE7 能识别*，也能识别!important;
FF 不能识别*，但能识别!important;
根据上述表达，同一类/ID 下的 CSS hack 可写为：
.searchInput {
background-color:#333;/*三者皆可*/
*background-color:#666 !important; /*仅 IE7*/
*background-color:#999; /*仅 IE6 及 IE6 以下*/
}
一般三者的书写顺序为：FF、IE7、IE6.
写法二：
IE6 可识别“_”，而 IE7 及 FF 皆不能识别，所以当只针对 IE6 与 IE7 及 FF 之间的区别
时，可这样书写：
.searchInput {
background-color:#333;/*通用*/
_background-color:#666;/*仅 IE6 可识别*/
}
写法三：
*+html 与 *html 是 IE 特有的标签, Firefox 暂不支持。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*仅 IE6*/
*+html .searchInput {background-color:#555;}/*仅 IE7*/
屏蔽 IE 浏览器：
select 是选择符，根据情况更换。第二句是 MAC 上 safari 浏览器独有的。
*:lang(zh) select {font:12px !important;} /*FF 的专用*/
select:empty {font:12px !important;} /*safari 可见*/
IE6 可识别：
这里主要是通过 CSS 注释分开一个属性与值，注释在冒号前。
select { display /*IE6 不识别*/:none;}
IE 的 if 条件 hack 写法：
所有的 IE 可识别： <!–[if IE]> Only IE <![end if]–>
只有 可以识别:
<!–[if IE ]> Only IE <![end if]–>
包换 都可以识别:
<!–[if gt IE ]> Only IE + <![end if]–>
仅 IE6 可识别:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6 以及 IE6 以下的 都可识别:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
仅 IE7 可识别:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>
简单 CSS hack：区分 IE6、IE7、IE8、Firefox、Opera
方法一： 跨浏览器的网页设计一直是让人很头疼的问题，这不只是因为浏览器的版
本众多，还有一个重要的原因是相同浏览器的不同时期的版本也会有差异，甚至是在不同操
作同台上还会有不同。因此使 CSS hack 技术进行浏览器区分是实现跨浏览器访问一个好方
法。CSS Hack 技术有很多，具体可以查看：
本文据说的主要是通过“.”，“>”，“*”，“_”来区分。以下是本人对这四种符号的测试结
果：
———————IE6—— IE7——IE8——FF2——FF3—
>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; /*
用于 Opera、Firefox2、Firefox3 等现代浏览器*/
>color:green !important; /*IE7、IE8 可以识别该规则，因此它覆盖掉了上一条规则*/
color:red; /*所有浏览器都可以识别，但是以上两条规则有!important，所以这条规则被
忽视；只有 IE6 认识并覆盖掉上两条规则*/
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 能识别*，但不能识别 !important
IE7 能识别*，也能识别!important
FF 不能识别*，但能识别!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 的写
在后面。
Css 兼容性 && CSS hack:区分 IE6，IE7，IE8，firefox
2009 年 06 月 19 日 星期五 10:35 .以前做网页的时候，只考虑 IE6 和 FF 的兼容
性，换个公司了，要求也高了，FF 和 IE 6 7 8 要全兼容了，
碰到要单独 Hack IE8 的。当然，用注释非常方便，只要添加相应的注释就可以解决。
但问题是，为了一句 CSS 写多一个文件，或者在 header 上添加注释，那显然不是懒人的习
惯做法。结论如下：
当然，注意顺序。根据 CSS 的优先性，上面的写法，分别针对 Firefox、IE8、IE7 和 IE6
显示值。让我们看看这个演示：
演示的 CSS 代码如下：
{
height:60px;text-align:center;line-height:60px;border:1px dashed
#bbb;background:#f7f7f7;font:15;
color:blue; // 所有浏览器
color:brown\9; // 所有 IE 浏览器
+color:red; // IE7
_color:green; // IE6
}
注意下面介绍的这些 hack 写法仅适用于 。如果没有在 HTML 最前加上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN"
"
xmlns="
那么效果将不一样！此外，这里所说的 IE8，不是指 IE8 的兼容模式，因为 IE8 的兼容
模式其实就是 IE7。
区别 IE6、7 与 FF/IE8：
background:blue;*background:orange;
引用显示效果：
IE 6/7：orange
FF/IE8:blue
原理：FF/IE8 不支持*开头，而 IE6/7 都支持。
区别 IE6 与 IE7/IE8/FF：
background:green;_background:blue;
引用显示效果：
IE7/8/FF：green
IE6:blue
原理：IE6 支持下划线"_"，IE7、8 和 firefox 均不支持下划线。
区别 FF/IE8 和 IE6/7：
background:orange;+background:green;-background:blue;
或者
background:orange;*background:green!important;*background:blue;
引用显示效果：
IE6：blue
IE7：green
FF/IE8:orange
原理：IE6 能识别-，IE7 能识别+，IE8 和 FF 都不能识别+和-
IE8/FF 都不识别*，IE7 优先识别!important，IE6 不能识别!important。
关于 IE8 的 hacks：
.test{
color:/*\**/#00f\9; /* IE8 only */
color:#00f\9; /* 适用于所有 IE 版本 */
}
可同时区分 IE8、IE7、IE6、Firefox 的 CSS hacks：
.test{
color:#000; /* Firefox */
color:/*\**/#00f\9; /* IE8 */
*color:#f00; /* IE7 */
_color:#0f0; /* IE6 */
}
添加相应的注释解决兼容性问题
注释相应的 Css 文件：
<!--[if IE 7]><!-->
<link href="css/" rel="stylesheet" type="text/css" />
<!-->
<![endif]-->
<!--[if IE 6]><!-->
<link href="css/" rel="stylesheet" type="text/css" />
<!-->
<![endif]-->
<!--[if gte IE 8]><!-->
<link href="css/" rel="stylesheet" type="text/css" />
<!-->
<![endif]-->
注释相应的 Css 内容：
<!--[if ie 6]>
<style>
<!--
#warp{ padding-bottom:11px;}
-->
</style>
<![endif]-->
<!--[if ie 7]>
<style>
<!--
#warp{ padding-bottom:11px;}
-->
</style>
<![endif]-->
<!--[if ie 8]>
<style>
<!--
#warp{ padding-bottom:11px;}
-->
</style>
<![endif]-->
CSS 在 IE6,IE7,FIREFOX 中的区别
2009-05-22 18:49CSS 在 IE6,IE7,FIREFOX 中的区别
第一种，是 CSS HACK 的方法
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。
这样也属于 CSS HACK，不过没有上面这样简洁。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
第二种是使用 IE 专用的条件注释
<!-- 其他浏览器 -->
<link rel="stylesheet" type="text/css" href="" />
<!--[if IE 7]>
<!-- 适合于 IE7 -->
<link rel="stylesheet" type="text/css" href="" />
< ![endif]-->
<!--[if lte IE 6]>
<!-- 适合于 IE6 及一下 -->
<link rel="stylesheet" type="text/css" href="" />
< ![endif]-->
第三种 css filter 的办法，以下为经典从国外网站翻译过来的。
新建一个 css 样式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个 div,并使用前面定义的 css 的样式：
<div id="item">some text here</div>
在 body 表现这里加入 lang 属性,中文为 zh：
<body lang="en">
现在对 div 元素再定义一个样式：
*:lang(en) #item{
background:green !important;
}
这样做是为了用!important 覆盖原来的 css 样式,由于:lang 选择器 并不支持,所以对
这句话不会有任何作用,于是也达到了 下同样的效果,但是很不幸地的是,safari 同样不
支持此属性,所以需要加入以下 css 样式：
#item:empty {
background: green !important
}
:empty 选择器为 css3 的规范,尽管 safari 并不支持此规范,但是还是会选择此元素,不管
是否此元素存在,现在绿色会现在在除 ie 各版本以外的浏览器上。
对 IE6 和 FF 的兼容可以考虑以前的!important</body>
CSS 完美兼容 IE6/IE7/FF 的通用简便方法
作者:pointc 日期:2008-12-02
字体大小: 小 中 大 通常我们遇到 3 种情况：
IE6 正常 IE7/FF 不正常
这种情况下我们这样处理：
padding: 7px !important;（针对 FF/IE7）
padding: 6px;（针对 IE6）
IE6 IE7 正常 FF 不正常
这种情况我们要这么处理，因为!important IE7 也是能识别的！
padding: 7px;（针对 FF）
*padding: 6px;（针对 IE6/IE7）
IE6 IE7 FF 都不一样
这种情况我们这样来处理：
padding: 7px;（针对 FF）
*padding: 6px;（针对 IE7）
_padding: 5px; （针对 IE6）
注意顺序，在此多谢 jonson 的帮助补充！希望此贴能为那些因为浏览器的兼容问题而
焦虑的同志们带来帮助！
解决 IE6、IE7 在 CSS 中设置最小高度遇到的问题
[转]2009 年 06 月 16 日 星期二 05:21 .当设置某一个区域的最小高度为某个值的时
候，在 Firefox、IE6 以及 IE7 中的表现并不一样。如果只是设定了 min-height 值，那么在 IE6
中不能识别；但设定了 height 值，在 IE7 和 Firefox 中，位置就会固定了。这是一个很大的
问题。那么为了协调各个浏览器和各个版本，我们怎样做才能解决最小高度的问题呢？
我在网络上寻找了一些相关资料，有一种解决方法比较好：
.distance {
height:auto!important;
height:100px;
min-height:100px;
}
!import（优先）标签在 IE6 中并不认识，所以在 IE6 中上述代码会被理解成为：
height:100px;
min-height:100px;
而在 IE7 中则是：
height:auto;
min-height:100px;
在这里，我们所利用的特性是：
IE6 不能识别 !important 标签;
IE6 不能识别 min-height 标签;
IE6 中的高度 (height) 标签的最终效果等同于 IE7 与 Firefox 浏览器中的最小高度
(min-height)标签;
最终便可以解决上述问题。
另一種方法： (這個看不懂，不過可以用)
.autoheight{ min-height:200px; height:200px;}
[class].autoheight{height:auto;}
css 浏览器兼容性一览表（摘抄）2009-03-02 16:49 在网上找到一个 CSS hack 列表，记
录在这里以分析 css 的浏览器兼容性
另外摘抄一份目前的 css 浏览器兼容问题汇总，记录在这里自己好好学习一下
CSS 对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不
是难事,从网上收集了 IE7,6 与 Fireofx 的兼容性处理方法并整理了一下.对于 的过度,
请尽量用 xhtml 格式写代码,而且 DOCTYPE 影响 CSS 处理,作为 W3C 的标准,一定要加
DOCTYPE 声名.
CSS 技巧
的垂直居中问题 vertical-align:middle; 将行距增加到和整个 DIV 一样高
line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
2. margin 加倍的问题 设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个
ie6 都存在的 bug。解决方案是在这个 div 里面加上 display:inline; 例如： <#div id=”imfloat”
> 相应的 css 为 #IamFloat{ float:left; margin:5px;/*IE 下理解为 10px*/ display:inline;/*IE 下再
理解为 5px*/}
3.浮动 ie 产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情
况之下 IE 会产生 200px 的距离 display:inline; //使浮动忽略} 这里细说一下 block 与 inline 两
个元素：block 元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元
素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //
可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;
4 IE 与宽度和高度的问题 IE 不认得 min-这个定义，但实际上它把正常的 width
和 height 当作有 min 的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器
里这两个值就不会变，如果只用 min-width 和 min-height 的话，IE 下面根本等于没有设置宽
度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px;
min-height: 35px;}
5.页面的最小宽度 min -width 是个非常方便的 CSS 命令，它可以指定元素最小也
不能小于某个宽度，这样就能保证排版一直正确。但 IE 不认得这个，而它实际上把 width
当做最小宽度来使。为了让这一命令在 IE 上也能用，可以把一个<div> 放到 <body> 标签
下 ， 然 后 为 div 指 定 一 个 类 , 然 后 CSS 这 样 设 计 ： #container{ min-width: 600px;
width:expression( < 600? "600px": "auto" );} 第一个 min-width 是正
常的；但第 2 行的 width 使用了 Javascript，这只有 IE 才认得，这也会让你的 HTML 文档不
太正规。它实际上通过 Javascript 的判断来实现最小宽度。
浮动 IE 文本产生 3 象素的 bug 左边对象浮动，右边采用外补丁的左边距来
定 位 ， 右 边 对 象 内 的 文 本 会 离 左 边 有 3px 的 间 距 . #box{ float:left; width:800px;}
#left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键}
<div id="box"> <div id="left"></div> <div id="right"></div> </div>
捉迷藏的问题 当 div 应用复杂的时候每个栏中又有一些链接，DIV 等这个时
候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在
页面。 解决办法：对#layout 使用 line-height 属性或者给#layout 使用固定高和宽。页面结构
尽量简单。
的 div 闭合;清除浮动;自适应高度;
① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的
NOTfloatC 并不希望继续平移，而是希望往下排。(其中 floatA、floatB 的属性已经设置为
float:left;) 这段代码在 IE 中毫无问题，问题出在 FF。原因是 NOTfloatC 并非 float 标签，必
须将 float 标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div
class=”clear”>这个 div 一定要注意位置，而且必须与两个具有 float 属性的 div 同级，之间不
能 存 在 嵌 套 关 系 ， 否 则 会 产 生 异 常 。 并 且 将 clear 这 种 样 式 定 义 为 为 如 下 即
可： .clear{ clear:both;}
①作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在 wrapper
里面加上 overflow:hidden; 当包含 float 的 box 的时候，高度自动适应在 IE 下无效，这时候
应该触发 IE 的 layout 私有属性(万恶的 IE 啊！)用 zoom:1;可以做到，这样就达到了兼容。
例如某一个 wrapper 如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
①对于排版,我们用得最多的 css 描述可能就是 float:left.有的时候我们需要在 n 栏
的 float div 后面做一个统一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”
center”></div> <div id=”right”></div> </div> 比如我们要将 page 的背景设置成蓝色,以达到
所有三栏的背景颜色是蓝色的目的,但是我们会发现随着 left center right 的向下拉长,而 page
居然保存高度不变,问题来了,原因在于 page 不是 float 属性,而我们的 page 由于要居中,不能
设 置 成 float, 所 以 我 们 应 该 这 样 解 决 <div id= ” page ” > <div id= ” bg ” style= ”
float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div>
</div> </div> 再嵌入一个 float left 而宽度是 100%的 DIV 解决之
①万能 float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats
Without Structural Markup], 将 以 下 代 码 加 入 Global CSS 中 , 给 需 要 闭 合 的 div 加 上
class="clearfix" 即 可 , 屡 试 不 爽 . /* Clear Fix */ .clearfix:after { content:"."; display:block;
height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac
*/ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 或 者 这 样 设
置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
11.高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行
调节，特别是当内层对象使用 margin 或 paddign 时。 例： #box {background-color:#eee; } #box
p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>p 对象中的内
容 </p> </div> 解 决 方 法 ： 在 P 对 象 上 下 各 加 2 个 空 的 div 对 象 CSS 代
码：.1{height:0px;overflow:hidden;}或者为 DIV 加上 border 属性。
12 .IE6 下为什么图片下有空隙产生解决这个 BUG 的方法也有很多,可以是改变
html 的排版,或者设置 img 为 display:block 或者设置 vertical-align 属性为 vertical-align:top |
bottom |middle |text-bottom 都可以解决.
13.如何对齐文本与文本输入框 加上 vertical-align:middle; <style type="text/css">
<!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } --> </style>
标准中定义 id 与 class 有什么区别吗 一.web 标准中是不容许重复 ID 的,比
如 div id="aa" 不容许重复 2 次,而 class 定义的是类,理论上可以无限重复, 这样需要多次引
用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于 class,看上面的例子三.方
便 JS 等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个 ID,否
则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一
个 ID 来得简单.
15. LI 中内容超过长度后以省略号显示的方法 此方法适用与 IE 与 OP 浏览器
<style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis;
-o-text-overflow:ellipsis; overflow: hidden; } --> </style>
16.为什么 web 标准中 IE 无法设置滚动条颜色了 解决办法是将 body 换成 html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN"
" <meta http-equiv="Content-Type"
content="text/html; charset=gb2312" /> <style type="text/css"> <!-- html
{ scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff; } --> </style>
17.为什么无法定义 1px 左右高度的容器 IE6 下这个问题是因为默认的行高造成的,
解决的方法也有很多,例如:overflow:hidden | zoom: | line-height:1px
18.怎么样才能让层显示在 FLASH 之上呢 解决的办法是给 FLASH 设置透明
<param name="wmode" value="transparent" />
19.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值
的 方 法 , 负 值 的 大 小 为 其 自 身 宽 度 高 度 除 以 二 <style type="text/css"> <!-- div
{ position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px;
border:1px solid red; } --> </style>
FF 与 IE
1. Div 居中问题 div 设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，
IE 需要设定 body 居中，首先在父级元素定义 text-algin: center;这个的意思就是在父级元素内
的内容居中。
2.链接(a 标签)的边框与背景 a 链接加边框和背景色，需设置 display: block, 同时
设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显
示错位, 若不设 height, 可以在 menubar 中插入一个空格。
3.超链接访问过后 hover 样式就不出现的问题被点击访问过的超链接样式不在具
有 hover 和 active 了,很多人应该都遇到过这个问题,解决方法是改变 CSS 属性的排列顺序:
L-V-H-A Code: <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} -->
</style>
4. 游标手指 cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅
IE 可以
的 padding 与 margin ul 标签在 FF 中默认是有 padding 值的,而在 IE 中只有
margin 默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
6. FORM 标签 这个标签在 IE 中,将会自动 margin 一些边距,而在 FF 中 margin 则
是 0,因此,如果想显示一致,所以最好在 css 中指定 margin 和 padding,针对上面两个问题,我
的 css 中一般首先都使用这样的样式 ul,form{margin:0;padding:0;}给定义死了,所以后面就不
会为这个头疼了.
7. BOX 模型解释不一致问题 在 FF 和 IE 中的 BOX 模型解释不一致导致相差 2px
解决方法：div{margin:30px!important;margin:28px;} 注意这两个 margin 的顺序一定不能写
反， important 这个属性 IE 不能识别，但别的浏览器可以识别。所以在 IE 下其实解释成这
样： div {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写
margin:xx px!important; #box{ width:600px; //for - w\idth:500px; //for ff+}
#box{ width:600px!important //for ff width:600px; //for ff+ width /**/:500px; //for -}
8.属性选择器(这个不能算是兼容,是隐藏 css 的一个 bug) p[id]{}div[id]{} 这个对于
和 以下的版本都隐藏,FF 和 OPera 作用.属性选择器和子选择器还是有区别的,子
选择器的范围从形式来说缩小了,属性选择器的范围比较大,如 p[id]中,所有 p 标签中有 id 的
都是同样式的.
9.最狠的手段 - !important; 如果实在没有办法解决一些细节问题,可以用这个方
法 .FF 对 于 ” !important ” 会 自 动 优 先 解 析 , 然 而 IE 则 会 忽 略 . 如
下 .tabd1{ background:url(/res/images/up/) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/) no-repeat 1px 0px; /* Style for IE */} 值得注意的是，一
定要将 xxxx !important 这句放置在另一句之上，上面已经提过
,FF 的默认值问题 或许你一直在抱怨为什么要专门为 IE 和 FF 写不同的 CSS，
为什么 IE 这样让人头疼，然后一边写 css，一边咒骂那个可恶的 M$ IE.其实对于 css 的标准
支持方面，IE 并没有我们想象的那么可恶，关键在于 IE 和 FF 的默认值不一样而已，掌握
了这个技巧，你会发现写出兼容 FF 和 IE 的 css 并不是那么困难，或许对于简单的 css，你
完全可以不用”!important”这个东西了。 我们都知道，浏览器在显示网页的时候，都会根据
网页的 css 样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体
的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的
方式来进行显示，譬如文字，如果你没有在 css 中指定颜色，那么浏览器将采用黑色或者系
统颜色来显示，div 或者其他元素的背景，如果在 css 中没有被指定，浏览器则将其设置为
白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现 FF 和 IE 显示不一样
的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在 w3 中有没有
对应的标准来进行规定，因此对于这点也就别去怪罪 IE 了。
11.为什么 FF 下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会
象 IE6 里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉
height 设置 min- height:200px; 这 里 为 了 照顾 不 认识 min-height 的 IE6 可以 这样定 义 :
{ height:auto!important; height:200px; min-height:200px; }
下 如 何 使 连 续 长 字 段 自 动 换 行 众 所 周 知 IE 中 直 接 使 用
word-wrap:break-word 就 可 以 了 , FF 中 我 们 使 用 JS 插 入 的 方 法 来 解 决 <style
type="text/css"> <!-- div { width:300px; word-wrap:break-word; border:1px solid red; } -->
</style> <div
id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <scrīpt type="text/javascrīpt">
/* <![CDATA[ */ function toBreakWord(el, intLen){ var ōbj=(el); var
strContent=; var strTemp="";
while(>intLen){ strTemp+=(0,intLen)+" ";
strContent=(intLen,); } strTemp+=" "+strContent;
=strTemp; } if( && !) toBreakWord("ff",
37); /* ]]> */ </scrīpt>
13. 为 什 么 IE6 下 容 器 的 宽 度 和 FF 解 释 不 同 呢 <?xml version=""
encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN"
" <meta http-equiv="Content-Type"
content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { cursor:pointer;
width:200px; height:200px; border:10px solid red } --> </style> <div ō
nclick="alert()">让 FireFox 与 IE 兼容</div> 问题的差别在于容器的整体宽度
有没有将边框（border）的宽度算在其内,这里 IE6 解释为 200PX ,而 FF 则解释为 220PX,那
究竟是怎么导致的问题呢？大家把容器顶部的 xml 去掉就会发现原来问题出在这,顶部的申
明触发了 IE 的 qurks mode,关于 qurks mode、 standards mode 的相关知识 ,请参考 :http:
//
IE6,IE7,FF 出来了，对 CSS 的支持又有新问题。浏览器多了，网页兼容性更
差了，疲于奔命的还是我们 ，为解决 的兼容问题，找来了下面这篇文章：现在我大
部分都是用!important 来 hack，对于 ie6 和 firefox 测试可以正常显示，但是 ie7 对!important
可以正确解释，会导致页面没按要求显示！下面是三个浏览器的兼容性收集.
第一种，是 CSS HACK 的方法 height:20px; /*For Firefox*/ *height:25px; /*For IE7 &
IE6*/ _height:20px; /*For IE6*/ 注意顺序。 这样也属于 CSS HACK，不过没有上面这样简洁。
#example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example
{ color: #999; } /* IE7 */
<!--其他浏览器 --> <link rel="stylesheet" type="text/css" href="" /> <!--[if IE
7]> <!-- 适 合 于 IE7 --> <link rel="stylesheet" type="text/css" href="" /> <![endif]-->
<!--[if lte IE 6]> <!-- 适合于 IE6 及一下 --> <link rel="stylesheet" type="text/css" href=""
/> <![endif]-->
第三种，css filter 的办法，以下为经典从国外网站翻译过来的。. 新建一个 css 样
式如下： #item { width: 200px; height: 200px; background: red; } 新建一个 div,并使用前面定
义的 css 的样式： <div id="item">some text here</div> 在 body 表现这里加入 lang 属性,中文
为 zh ： <body lang="en"> 现 在 对 div 元 素 再 定 义 一 个 样 式 ： *:lang(en)
#item{ background:green !important; } 这样做是为了用!important 覆盖原来的 css 样式 ,由
于:lang 选择器 并不支持,所以对这句话不会有任何作用,于是也达到了 下同样的
效果,但是很不幸地的是,safari 同样不支持此属性,所以需要加入以下 css 样式： #item:empty
{ background: green !important } :empty 选择器为 css3 的规范,尽管 safari 并不支持此规范,但
是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除 ie 各版本以外的浏览器上。
对 IE6 和 FF 的兼容可以考虑以前的!important 个人比较喜欢用
