一、兼容性处理要点
1、DOCTYPE 影响 CSS 处理；
2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width；
3、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式
4 、div 的 垂 直 居 中 问 题 : vertical-align:middle; 将 行 距 增 加 到 和 整 个 DIV 一 样 高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行；
5、在 mozilla firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px 解决方法： div{margin:30px!important;margin:28px;} 注意这两个 margin 的顺序一定不能写反，!important 这个属性 IE 不能识别，但别的浏览器可以识别。所以在 IE 下其实解释成这样： div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
二、浏览器差异
1、ul 和 ol 列表缩进问题
消除 ul、ol 等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px; 其中margin 属性对 IE 有效，padding 属性对 FireFox 有效。
[注] 经验证，在 IE 中，设置 margin:0px 可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置 padding 对样式没有影响；在 Firefox 中，设置 margin:0px 仅仅可以去除上下的空白，设置 padding:0px 后仅仅可以去掉左右缩进，还必须设置 list- style:none 才 能去除列表编号或圆点。也就是说，在 IE 中仅仅设置 margin:0px 即可达到最终效果，而在 Firefox中必须同时设置 margin:0px、 padding:0px 以及 list-style:none 三项才能达到最终效果。
2、CSS 透明问题
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好两个都写，并将 opacity 属性放在下面。
3、CSS 圆角问题
IE：ie7 以下版本不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-top-left:4px;
-moz- border- radius-top-right:4px;
-moz-border-radius-bottom-left:4px;
-moz- border- radius- bottom-right:4px;。
[注] 圆角问题是 CSS 中的经典问题，建议使用 JQuery 框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过 jQuery 的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。
4、cursor:hand VS cursor:pointer
问题说明：firefox 不支持 hand，但 ie 支持 pointer ，两者都是手形指示。
解决方法：统一使用 pointer。
5、字体大小定义不同
对字体大小 small 的定义不同，Firefox 中为 13px，而 IE 中为 16px，差别挺大。
解决方法：使用指定的字体大小如 14px。并列排列的多个元素（图片或者链接）的 div 和 div 之间，代码中的空格和回车在 firefox中都会被忽略，而 IE 中却默认显示为空格（约 3px）。
6、CSS 双线凹凸边框
IE：border:2px outset;
FF： -moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;
三、浏览器 bug
1、IE 的双边距 bug
设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6 都存在的 bug。
解决方案：在这个 div 里面加上 display:inline;
例如：
<#div id=”imfloat”>
相应的 css 为
以下为引用的内容：
#IamFloat{
float:left;
margin:5px;/*IE 下理解为 10px*/
display:inline;/*IE 下再理解为 5px*/
}
#IamFloat{
float:left;
margin:5px;/*IE 下理解为 10px*/
display:inline;/*IE 下再理解为 5px*/
}
关于 CSS 中的问题实在太多了，甚至同样的 CSS 定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准 XHTML 标准编写，较少使用 table，CSS定义尽量依照标准 DOM，同时兼顾 IE、Firefox、Opera 等主流浏览器。很多情况下，FF 和 Opera的 CSS 解释标准更贴近 CSS 标准，也更具有规范性。
2、IE 选择符空格 BUG
一个空格也可以使样式失效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-->
</style>
</head>
<body>
<p>对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，
也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
</body>
</html>
这段代码对<p>的首字符样式定义在 IE6 上看是没有效果的（IE7 没测试），而在p:first-letter 和{font- size:300%}加上空格，也就是 p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在 FireFox 下看是正常的。按道理说，p:first- letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符”-”。IE 有个 BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在 FF 中，加不加空格都可以正常处理。
四、如何解决 IE
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页
面显示效果不统一的情况，在大多数情况下，我们的需求是，无论用户用什么浏览器来查看
我们的网站或者登陆我们的系统，都应该是统一的显示效果。随着浏览器版本的增多，解决
IE 浏览器兼容性显得尤为重要.
1、!important (功能有限)
随着 IE7 对!important 的支持, !important 方法现在只针对 IE6 的兼容.(注意写法.记得该
声明位置需要提前.)
例如:
#example {
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */
}
2、CSS HACK 的方法
首先需要知道的是：
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
例如：
#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */
下面的这种方法比较简单
举几个例子：
1、IE6 - IE7+FF
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其实这个用上面说的第一种方法也可以
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
2、IE6+IE7 - FF
#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}
3、IE6+FF - IE7
#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}
4、IE6 IE7 FF 各不相同
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或：
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}
需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面解释一下 4 的代码：
读代码的时候，第一行 height:100px; 大家都通用，IE6 IE7 FF 都显示 100px 。到了第二行*height:300px; FF 不认识这个属性，IE6 IE7 都认，所以 FF 还显示 100px，而 IE6 IE7 把第一行得到的 height 属性给覆盖了，都显示 300px 。到了第三行_height:200px;只有 IE6 认识，所以 IE6 就又覆盖了在第二行得到的 height,最终显示 200px 。这样，三个浏览器都有自己的height 属性了，各玩各的去吧。*+html 对 IE7 的兼容 必须保证 HTML 顶部有如下声明：
〈!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"〉
3、使用 IE 专用的条件注释
〈!--其他浏览器 --〉
〈link rel="stylesheet" type="text/css" href="css.css" /〉
〈!--[if IE 7]〉
〈!-- 适合于 IE7 --〉
〈link rel="stylesheet" type="text/css" href="ie7.css" /〉
〈![endif]--〉
〈!--[if lte IE 6]〉
〈!-- 适合于 IE6 及以下 --〉
〈link rel="stylesheet" type="text/css" href="ie.css" /〉
〈![endif]--〉
貌似要编三套 css，我还没用过，先粘过来再说
IE 的 if 条件 Hack
1. 〈!--[if !IE]〉〈!--〉 除 IE 外都可识别 〈!--〈![endif]--〉
2. 〈!--[if IE]〉 所有的 IE 可识别 〈![endif]--〉
3. 〈!--[if IE 5.0]〉 只有 IE5.0 可以识别 〈![endif]--〉
4. 〈!--[if IE 5]〉 仅 IE5.0 与 IE5.5 可以识别 〈![endif]--〉
5. 〈!--[if gt IE 5.0]〉 IE5.0 以及 IE5.0 以上版本都可以识别 〈![endif]--〉
6. 〈!--[if IE 6]〉 仅 IE6 可识别 〈![endif]--〉
7. 〈!--[if lt IE 6]〉 IE6 以及 IE6 以下版本可识别 〈![endif]--〉
8. 〈!--[if gte IE 6]〉 IE6 以及 IE6 以上版本可识别 〈![endif]--〉
9. 〈!--[if IE 7]〉 仅 IE7 可识别 〈![endif]--〉
10. 〈!--[if lt IE 7]〉 IE7 以及 IE7 以下版本可识别 〈![endif]--〉
11. 〈!--[if gte IE 7]〉 IE7 以及 IE7 以上版本可识别 〈![endif]—〉
注:gt = Great Then
lt = Less Then
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于
4、css filter 的办法()
新建一个 css 样式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个 div,并使用前面定义的 css 的样式：
〈div 〉some text here〈/div〉
在 body 表现这里加入 lang 属性,中文为 zh：
〈body lang="en"〉
现在对 div 元素再定义一个样式：
*:lang(en) #item{
background:green !important;
}
这样做是为了用!important 覆盖原来的 css 样式,由于:lang 选择器 ie7.0 并不支持,所以对这句话不会有任何作用,于是也达到ie6.0 下同样的效果,但是很不幸地的是,safari 同样不支持此属性,所以需要加入以下 css 样式：
#item:empty {
background: green !important
}
:empty 选择器为 css3 的规范,尽管 safari 并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除 ie 各版本以外的浏览器上。
5、FLOAT 闭合（clearing float）
网页在某些浏览器上显示错位很多时候都是因为使用了 float 浮动而没有真正闭合，这也是 div 无法自适应高度的一个原因。如果父 div 没有设 float 而其子 div 却设了 float 的话,父 div 无法包住整个子 DIV，这种情况一般出现在一个父 DIV 下包含多个子 DIV。解决办法：
1、给父 DIV 也设上 float(不要骂我，我知道是废话)
2、在所有子 DIV 后新加一个空 DIV(不推荐，有些浏览器可以看见空 DIV 产生的空隙)
比如：
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
〈div class="parent"〉
〈div class="son1"〉〈/div〉
〈div class="son2"〉〈/div〉
〈div class="clear"〉〈/div〉
〈/div〉
3、万能 float 闭合
将以下代码加入 Global CSS 中,给需要闭合的 div 加上 class=”clearfix” 即可,屡试不爽.
代码:
〈style〉
/* 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 */
〈/style〉
:after（伪对象）,设置在对象后发生的内容，通常和 content 配合使用，IE 不支持此伪对象，非 Ie 浏览器支持，所以并不影响到 IE/WIN 浏览器。这种的最麻烦。
4、overflow:auto（刚看到的，极力推荐）
只要在父 DIV 的 CSS 中加上 overflow:auto 就搞定。
举例：
.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
〈div class="parent"〉
〈div class="son1"〉〈/div〉
〈div class="son2"〉〈/div〉
〈/div〉
原理是，外围元素之所以不能很好的延伸，问题出在了 overflow 上，因为 overflow不可见（见 W3C 的解释）。现在只要将给外围元素添 加一个“overflow:auto”，就可以解决问题，结果是除了 IE，真的可以解决。下来就要解决 IE 的问题了，再加上“_height:1%”，这个问题就完全解决了。我试了一下，其实不加"_height:1%“在 IE 下也行，留着吧。
6、需要注意的一些兼容细节
1, FF 下给 div 设置 padding 后会导致 width 和 height 增加(DIV 的实际宽度=DIV 宽+Padding), 但 IE 不会.
解决办法：给 DIV 设定 IE、FF 两个宽度，在 IE 的宽度前加上 IE 特有标记" * "号。
2, 页面居中问题.
body {TEXT-ALIGN: center;} 在 IE 下足够了，但 FF 下失效。
解决办法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "
3、 有的时候在 IE6 上看见一些奇怪的间隙，可我们高度明明设好了呀。
解决办法：试试在有空隙的 DIV 上加上"font-size:0px;"
4、 关于手形光标. cursor: pointer. 而 hand 只适用于 IE.
5、 浮动 IE6 产生的双倍距离
#box{
float:left;
width:100px;
margin:0 0 0 100px;
}
这种情况之下 IE6 会产生 200px 的距离。解决办法：加上 display:inline，使浮动忽略；这里细说一下 block,inline 两个元素,Block 元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
}
6、页面的最小宽度
min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但 IE 不认得 min-这个定义，但实际上它把正常的 width 和 height当作有 min 的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里 这两个值就不会变，如果只用 min-width 和 min-height 的话，IE 下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重 要的。解决办法：为了让这一命令在 IE 上也能用，可以把一个〈div〉 放到 〈body〉 标签下，然后为 div 指定一个类： 然后 CSS 这样设计：
#container{
min-width: 600px;
width:expression(document.body.clientWidth 〈 600? “600px”: “auto” );
}
第一个 min-width 是正常的；但第 2 行的 width 使用了 Javascript，这只有 IE 才认得，这也会让你的 HTML 文档不太正规。它实际上通过 Javascript 的判断来实现最小宽度。
7、UL 和 FORM 标签的 padding 与 margin
ul 标签在 FF 中默认是有 padding 值的,而在 IE 中只有 margin 默认有值。FORM 标签在 IE 中,将会自动 margin 一些边距,而在 FF 中 margin 则是 0；
解决办法：css 中首先都使用这样的样式 ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.
8 、DIV 浮动 IE 文本产生 3 象素的 bug
下面这段是我在网上粘过来的
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有 3px 的间距.
#box{
float:left;
width:800px;
}
#left{
float:left;
width:50%;
}
#right{
width:50%;
}
*html #left{
margin-right:-3px; //这句是关键
}
HTML 代码
〈DIV id=box〉
〈DIV id=left〉〈/DIV〉
〈DIV id=right〉〈/DIV〉
〈/DIV〉
针对上面这段代码，下面说一下我的理解：
第一、只要 right 定义了 width 属性，在 FF 下绝对就会两行显示；
第二、两个 width 都定义为百分比的话，就算都为 100%在 IE 下也会一行显示。所以上面那句所谓“这句是关键”根本没用，不加也在一行，除非你 width 定义的是数值才用得上。所以说上面这段代码其实用处不大，至少在 FF 下不行。其实只要只定义 left 的 width 就行了，right 不定义 width 就不管在 IE 还是 FF 下都能成功，但这样的话父 DIV BOX 并没有真正的包含LEFT和RIGHT两子DIV,可以用我上面说的第5种办法解决。最简单的办法就是在RIGHT中加上 float:left 就 OK 了，真磨叽！
9、截字省略号
.hh {
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾。技术是好技术，很多人都喜欢乱用，但注意 Firefox 并不支持
五、 浏览器兼容性相关问题及其解决思路
1 、 厂商前缀
目前，各主流浏览器的新版本，对于 W3C 的标准支持很好，因此，首先保证代码符合 W3C 的标准，这是解决浏览器兼容问题的前提。其次，对于某些支持受限的属性，针对不同的浏览器添加相应的前缀，比如-webkit-、-o-、-moz-。
2 、不同浏览器默认的内外边距不同的问题
解决： *{margin:0;padding:0;}
3 、 不同浏览器水平居中的问题：
ie6-7 文本居中，嵌套的块元素也会居中 ，ff /opera /safari /ie8 文本会居中，嵌套块不会居中
解决： 块元素设置 margin-left:auto;margin-right:auto 或 margin:0 auto; 或外层嵌套 div设置<div align=”center”></div>
浮动块元素的居中：<div style="margin:0px auto;"><div style="float:left;"></div></div>
4 、不同浏览器垂直居中的问题 ：
在浏览器中 想要垂直居中，设置 vertical-align:middle; 不起作用。例如：ie6 下文本与文本输入框对不齐，需设置 vertical-align:middle，但是文本框的内容不会垂直居中
解决： 给容器设置一个与其高度相同的行高 line-height:与容器的 height 一样
5 、不同浏览器关于高度问题 ：
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。如果设定了高度，内容过 多时，ie6 下会自动增加高度、其他浏览器会超出边框
解决： 1.设置 overflow:hidden; 2.高度自增 height:auto!important;height:100px;
6 、IE6 默认的 div 高度问题：
ie6 默认 div 高度为一个字体显示的高度，在 ie6 下 div 的高度大于等于一个字的高度，因此在 ie6 下定义高度为 1px 的容器，显示的是一个字体的高度
解决：为这个容器设置下列属性之一 1、设置 overflow:hidden; 2、设置 line-height:1px; 3、设置 zoom:0.08
7 、IE6 最小高度( 宽度) 的问题：
ie6 不支持 min-height、min-width 属性，默认 height 是最小高度，width 是最小宽度。
解决： 使用 ie6 不支持但其余浏览器支持的属性!important。 设置属性min-height:200px; height:auto !important; height:200px;
8 、td 题 高度的问题 ：
table 中 td 的宽度都不包含 border 的宽度，但是 oprea 和 ff 中 td 的高度包含了 border的高度
解决：设置 line-height 和 height 一样。在 ie 中如果 td 中的没有内容，那么 border 将不会显示
9 、div 嵌套 p 时，出现空白行问题：
div 中显示<p>文本</p>，ff、oprea、Chrome：top 和 bottom 都会出现空白行，但是在ie 下不会出现空白行。
解决：设置 p 的 margin:0px，再设置 div 的 padding-top 和 padding-bottom
10 、IE6-7 图片下面有空隙的问题：
块元素中含有图片时，ie6-7 中会出现图片下有空隙
解决：1、在源代码中让</div>和<img>在同一行
2、将图片转换为块级对象 display:block;
3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom
4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么
可以对父元素设置： overflow:hidden;
5、设置图片的浮动属性 float:left;
11 、IE6 题 双倍边距的问题 ：
ie6 中设置浮动，同时又设置 margin 时，会出现双倍边距的问题；例 float:left;width:100px;margin:0 100px;
解决： 设置 display:inline;
12 、IE6 两个层之间 3px 的问题：
左边层采用浮动，右边没有采用浮动，这时在 ie6 中两层之间就会产生 3 像素的间距
解决： 1、右边层也采用浮动 float 2、左边层添加属性 margin-right:-3px;
13 、IE6 子元素绝对定位的问题：
父级元素使用 padding 后，子元素使用绝对定位，不能精确定位
解决： 在子元素中设置 _left:-20px; _top:-1px;
14 、 显示手型 cursor:hand 问题：ie6/7/8、opera 都支持 ，但是 safari 、 ff 不支持
解决： 写成 cursor:pointer; (所有浏览器都能识别)
15 、IE6-7 line-height 失效的问题：在 ie 中 img 与文字放一起时， line-height 不起作用
解决：都设置成 float
16 、td 题 自动换行的问题 ：Table 宽度固定，td 自动换行
解决： 设置 Table 的 table-layout:fixed，td 的 word-wrap:break-word
17 、 子容器浮动后，父容器扩展问题：子容器都 float 以后，父容器没有设定高度,父容器将不会扩展
解决： 只需要添加一个 clear:both 的 div，代码如下：
<div style="border:1px solid #333;width:204px">
<div style="width:100px;border:1px solid #333; float:left; ">子容器 a</div>
<div style="width:100px;border:1px solid #333; float:left;">子容器 b</div>
<div style="clear:both"></div>
</div>
18 、 透明 png 图片会带背景色问题：在 ie6 下透明的 png 图片会带一个背景色
解决：
background-image: url(icon_home.png);/* 其他浏览器 */
background-repeat: no-repeat;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6
*/
_background-image: none; /* IE6 */
19 、list-style-position 默认值的问题：ie 下 list-style-position 默认为 inside, firefox 默认为 outside
解决： css 中指定为 outside 即可解决兼容性问题
20 、ul 题 标签默认值的问题 ：ul 标签在 ff 中默认是有 padding 值的,而在 ie 中只有 margin 有值
解决： 定义 ul{margin:0;padding:0;}就能解决大部分问题
21 、 list-style-image 准确定位的问题：li 前设置图片时，图片与其后的文字对齐问题
解决：
1、采用背景定位 和 字符缩进的方
法 background:url() no-repeat left center; text-index:16px;
2、采用相对定位方法 li 设置 list-style:url(); li 的子元素 position:relative;top:-5px;
22 、IE 中 中 li 指定高度后，出现排版错误 问题：在 ie 下如果为 li 指定高度可能会出现排版错位
解决： 设置 line-height
23 、ul 或 li 浮动后，显示在 div 外 问题：div 中的 ul 或 li 设置 float 以后，都不在 div 中
解决： 必须在 ul 标签后加<div style="clear:both"></div>来闭合外层 div
24 、ul 或者 li 浮动后，margin 变大 问题：ul 设置 float 后，在 ie 中 margin 将变大
解决： 设置 ul 的 display:inline，li 的 list-style-position:outside；li 浮动问题设置 li 的display:inline
25 、 嵌套使用 ul 、li 的问题：ie 的 bug，嵌套使用 ul、li 时，里层的 li 设置 float 以后，外层 li 不设置 float, 里面的
ul 顶部和它外面的 li 总是有一段间距
解决： 设置里面的 ul 的 zoom:1
26 、 IE6-7 li 底部有 3px 题 的问题 ：这个 bug 产生的充要条件是 li 的子元素浮动并且 li 设置了以下 CSS 属性之一：width、
height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。
解决：
1、div 设置 clear:left|both，这时 li 不能设置 width、height、zoom。
2、li 设置 float:left，这时 li 可以设置 width、height、zoom。
3、li 设置 clear:left|both，这时 li 不能设置 width、height、zoom。
4、IE6/IE7 的这个 Bug 可以通过给 li 中的 div 设置 vertical-align:top|middle|bottom 解决。
27 、IE6 垂直列表间隙的问题：li 中有 a 且设置 display:block 时，ie6 中列表间会出现空隙
解决：
1、li 中加 display:inline;
2、li 使用 float 然后 clear:both;
3、给包含的文本末尾添加一个空格
4、设置 width
28 、IE6 题 列表背景颜色失效的问题 ：当父元素设置 position:relative;时，在 ie6 中第一个 ul、ol、dl 的背景颜色失效
解决： ul、ol、dl 都设置为 position:relative;
29 、IE6-7 列表背景颜色失效的问题 2 ：做横向导航栏时，ul 设置为 float 且有背景色，li 设置为 float。ie6-7 背景颜色失效
解决： 很多 ie 的 bug 都可以通过触发 layout 来解决 ul 添加属性
1、height:1%;
2、float:left;
3、zoom:1;
30 、题 列表不能换行的问题 ：li 设置为浮动，后面的 li 紧随其后，不能换行
解决： 1、为这个 ul 定义合适的宽高 2、给包含这个 ul 的父 div 定义合适的宽高。
31 、 超链接访问过后 hover 题 样式不出现的问题 ：点击超链接后，hover、active 样式没有效果
解决： 改变 CSS 属性的排列顺序: L-V-H-A
32 、 题 禁用中文输入法的问题 ：不能在输入框中输入汉字
解决： 只在 ie 系列 和 ff 中有效 ime-mode:disabled (但可以粘贴) 禁用粘贴： οnpaste="return false"
33 、题 除去滚动条的问题 ：隐藏滚动条
解决：
1、只有 ie6-7 支持<body scroll="no">
2、除 ie6-7 不支持 body{overflow:hidden}
3、所有浏览器 html{overflow:hidden}
34 、让层显示在 FLASH 之上：解决：把 FLASH 设置透明 、
1、<param name=" wmode " value="transparent" />
2、<param name="wmode" value="opaque"/>
34 、题 去除链接虚线边框的问题 ：当点击超链接后，ie6/7/8 ff 会出现虚线边框 ,而 opera、safari 没有虚线边框
解决： ie6/7 中 设置为 a { blr:expression(this.onFocus=this.blur()) } ie8 和 ff 都不支持expression 在 ie8 、ff 中设置为 :focus { outline: none; }
35 、css 题 滤镜的问题 ：css 滤镜只在 ie 中有效，Firefox, Safari(WebKit), Opera 只能够设置透明，它们不支持滤镜
filter，无法实现图片切换中间变换的效果，只能通过透明度来设置。
解决： ff 中设置透明度 -moz-opacity:0.10; opacity:0.6; ie 中只设置filter:alpha(opacity=50); 时，ie6-7 失效，还要设置 1、zoom:1; 2、width:100%;
36 、IE6 背景闪烁的问题：链接、按钮用 CSS sprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是:IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载
解决：用 JavaScript 设置 ie6 缓存这些图片：document.execCommand("BackgroundImageCache ",false,true);
37 、ff 、chrome 绝对定位无效 问题：在 IE 给 td 设置 position:relative，然后给它包含的一个容器使用 position:absolute 进行定位是有效的，但在 FF 和 Chrome 下却不可以。
解决：设置 td 的 display:block。
38 、IE6 绝对定位的问题 问题：
<div style="position:relative;border:1px solid orange;text-align:center;">
<div style="position:absolute;top:0;left:0; background:#CCC;">dovapour</div>
<a href="#" title="vapour 的 blog">内容</a>
</div>
解决：
left 的定位错误问题
1、给父层设置 zoom:1 触发 layout。
2、给父层设置宽度 width
bottom 的定位错误问题
1、给父层设置 zoom:1 触发 layout。
2、给父层设置高度 height
39 、float 的 的 div 闭合的问题：
例如：<#div id=”floatA”><#div id=”floatB”><#div id=”NOTfloatC”>这里的 NOTfloatC并不希望继续平移，而是希望往下排。(其中 floatA、floatB 的属性已经设置为 float:left;)这段代码在 IE 中毫无问题，问题出在其他浏览器中。原因是 NOTfloatC 并非 float 标签，必须将 float 标签 闭合。
解决：
在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>
这个 div 一定要注意位置，而且必须与两个具有 float 属性的 div 同级，之间不能存在嵌套关
系，否则会 产生异常。并且将 clear 这种样式定义为为如下即可：.clear{ clear:both;}
40 、选框、复选框与后面的文字对不齐 问题：
解决：
.align{font-size:12px;}
.align input{ display:block; float:left;}
.align label{ display:block; float:left; padding-top:3px; *padding-top:5px;}
不足之处：设置 padding 后高度和宽带都会增加
41 、边框重叠说明 说明：
为 table、td 都指定了边框后，然后使用 border-collapse:collapse 让边框重叠，可以看出在发生重叠时，Firefox 是用 td 覆盖 table 的，而 IE 是用 table 覆盖 td 的。使用时候需要注意。
42 、设置 td padding 的说明：
设置 td 的 padding 以后高度和宽带都会增加,padding-left 和 padding-right 的效果都一样增加了 td 的宽带，但是 padding-top 和 padding-bottom 的效果不一样。最好不要使用 td 的ding-top 和 padding-bottom
43 、使一个层垂直居中于浏览器中 说明：
使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二
div {
position:absolute;
top:50%; lef:50%;
margin:-100px 0 0 -100px;
width:200px; height:200px;
border:1px solid red;
}
44 、IE6 里的间距比超过设置的间距问题：
行内属性标签，设置 display:block 后采用 float 布局，又有横行的 margin 的情况，IE6间距 bug，IE6 里的间距比超过设置的间距
解决：在 display:block;后面加入 display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置 display:block;(除了 input 标签比较特殊)。在用 float 布局并有横向的 margin后，在 IE6 下，他就具有了块属性 float 后的横向margin 的 bug。不过因为它本身就是行内属性标签，所以我们再加上 display:inline 的话，它的高宽就不可设了。这时候我们还需要在 display:inline 后面加入 display:talbe。
待续...
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
