1、所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。随着浏览器版本的增多，解决 IE 浏览器兼容性显得尤为重要.一、!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 */下面的这种方法比较简单举几个例子
3、：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:2
4、00px; /* 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
5、 的代码：读代码的时候，第一行 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
6、的兼容 必须保证 HTML 顶部有如下声明： !DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.01 Transitional/EN“ “http:/www.w3.org/TR/html4/loose.dtd“三、使用 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!- 适合于 I
7、E6 及以下 -link rel=“stylesheet“ type=“text/css“ href=“ie.css“ /!endif-貌似要编三套 css，我还没用过，先粘过来再说IE 的 if 条件 Hack1. !-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-
8、 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
9、 Then or Equal 大于或等于 lte = Less Then or Equal 小于或等于四、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) #itembackground:green !import
10、ant;这样做是为了用!important 覆盖原来的 css 样式,由于:lang 选择器 ie7.0 并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0 下同样的效果,但是很不幸地的是,safari 同样不支持此属性,所以需要加入以下 css 样式：#item:empty background: green !important:empty 选择器为 css3 的规范,尽管 safari 并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除 ie 各版本以外的浏览器上。五、FLOAT 闭合（clearing float）网页在某些浏览器上显示错位很多时候
11、都是因为使用了 float 浮动而没有真正闭合，这也是 div 无法自适应高度的一个原因。如果父 div 没有设 float 而其子 div 却设了 float 的话,父 div无法包住整个子 DIV，这种情况一般出现在一个父 DIV 下包含多个子 DIV。解决办法：、给父 DIV 也设上 float(不要骂我，我知道是废话)2、在所有子 DIV 后新加一个空 DIV(不推荐，有些浏览器可以看见空 DIV 产生的空隙)比如：.parentwidth:100px; .son1float:left;width:20px; .son2float:left;width:80px; .clearclea
12、r:both;margin:0;parding0;height:0px;font-size:0px;div class=“parent“ div class=“son1“/div div class=“son2“/div div class=“clear“/div /div3、万能 float 闭合将以下代码加入 Global CSS 中,给需要闭合的 div 加上 class=”clearfix” 即可,屡试不爽. 代码: style /* Clear Fix */ .clearfix:after content:“.“; display:block; height:0; clear:bot
13、h; 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:
14、auto 就搞定。举例：.parentwidth:100px;overflow:auto .son1float:left;width:20px; .son2float:left;width:80px;div class=“parent“ div class=“son1“/div div class=“son2“/div /div作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了 overflow 上，因为 overflow 不可见（见 W3C 的解释）。现在只要将给外围元素添 加一个“overflow:auto”，就可以解决问题，结果是除了 IE，真的可以解决。下来就要解决 IE 的问
15、题了，再加上“_height:1%”，这个问题就完全解决了。我试了一下，其实不加“_height:1%“在 IE 下也行，留着吧。六、需要注意的一些兼容细节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-
16、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 元素的特点是:总是在新行上开始,高度,宽度,
17、行高,边距都可以控制(块元素);Inline 元素的特点是:和其他元素在同一行上,不可控制(内嵌元素); #box display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的的效果6 页面的最小宽度min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但 IE 不认得 min-这个定义，但实际上它把正常的 width 和 height 当作有 min 的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里 这两个值就不会变，如果只用min-width 和 min-height
18、 的话，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 文档不太正规。它实际上通过 Jav
19、ascript 的判断来实现最小宽度。7、UL 和 FORM 标签的 padding 与 marginul 标签在 FF 中默认是有 padding 值的,而在 IE 中只有 margin 默认有值。FORM 标签在 IE 中,将会自动 margin 一些边距,而在 FF 中 margin 则是 0；解决办法：css 中首先都使用这样的样式 ul,formmargin:0;padding:0;给定义死了,后面就不会为这个头疼了.8 ,DIV 浮动 IE 文本产生 3 象素的 bug下面这段是我在网上粘过来的左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有 3px 的间距.
20、 #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 下也会一行显示。所以上面那句所谓“这句是关键”根本没用，不加也在一
21、行，除非你 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 并不支持。
