1、CSS 样式兼容(ie6 ie7 firefox)多浏览器的相关技巧讲解: 浮动 float 闭合-Hack /* IE7+FF */ width: 200px; /* IE6 */ 二、CSS HACK 的方法(新手可以看看，高手就当路过吧)首先需要知道的是：所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6、IE7 共用 *height: 100px; IE7、FF 共用 height: 100px !important;例如：#example height:100px; /* FF */*
2、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
3、*/ *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、，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面解释一下 4 的代码：读代码的时候，第一行 height:100px; 大家都通用，IE6 IE7 FF 都显示 100px 到了第二行*height:300px; FF 不认识这个属性，IE6 IE7 都认，所以 FF 还显示 100px，而IE6 IE7 把第一行得到的 height 属性给覆盖了，都显示 300px 到了第三行_height:200px; 只有 IE6 认识，所以 IE6 就又覆盖了在第二行得到的 h
5、eight,最终显示 200px 这样，三个浏览器都有自己的 height 属性了，各玩各的去吧这样说要是你还不明白，要么你去撞墙，要么我去!不过还是你去比较好。哦，差点忘了说了： *+html 对 IE7 的兼容 必须保证 HTML 顶部有如下声明： 三、使用 IE 专用的条件注释貌似要编三套 css，我还没用过，先粘过来再说IE 的 if 条件 Hack1. 除 IE 外都可识别 2. 所有的 IE 可识别 3. 只有 IE5.0 可以识别 4. 仅 IE5.0 与 IE5.5 可以识别 5. IE5.0 以及 IE5.0 以上版本都可以识别 6. 仅 IE6 可识别 7. IE6 以及
6、IE6 以下版本可识别 8. IE6 以及 IE6 以上版本可识别 9. 仅 IE7 可识别 10. IE7 以及 IE7 以下版本可识别 11. IE7 以及 IE7 以上版本可识别 注:gt = Great Then 大于 = 大于号 lt = Less Then 小于 = some text here在 body 表现这里加入 lang 属性,中文为 zh：现在对 div 元素再定义一个样式：*:lang(en) #itembackground:green !important;这样做是为了用!important 覆盖原来的 css 样式,由于:lang 选择器 ie7.0 并不支持,所
7、以对这句话不会有任何作用,于是也达到了 ie6.0 下同样的效果,但是很不幸地的是,safari 同样不支持此属性,所以需要加入以下 css 样式：#item:empty background: green !important:empty 选择器为 css3 的规范,尽管 safari 并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除 ie 各版本以外的浏览器上。五、FLOAT 闭合（clearing float）网页在某些浏览器上显示错位很多时候都是因为使用了 float 浮动而没有真正闭合，这也是 div 无法自适应高度的一个原因。如果父 div 没有设 fl
8、oat 而其子 div 却设了 float 的话,父 div 无法包住整个子 DIV，这种情况一般出现在一个父 DIV 下包含多个子 DIV。解决办法：、给父 DIV 也设上 float(不要骂我，我知道是废话)2、在所有子 DIV 后新加一个空 DIV(不推荐，有些浏览器可以看见空 DIV 产生的空隙)比如：.parentwidth:100px; .son1float:left;width:20px; .son2float:left;width:80px; .clearclear:both;margin:0;parding0;height:0px;font-size:0px;3、万能 flo
9、at 闭合将以下代码加入 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 */
10、:after（伪对象）,设置在对象后发生的内容，通常和 content 配合使用，IE 不支持此伪对象，非 Ie 浏览器支持，所以并不影响到 IE/WIN 浏览器。这种的最麻烦。4、overflow:auto （刚看到的，极力推荐）只要在父 DIV 的 CSS 中加上 overflow:auto 就搞定。举例：.parentwidth:100px;overflow:auto .son1float:left;width:20px; .son2float:left;width:80px;作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了 overflow 上，因为overflow 不可见（
11、见 W3C 的解释） 。现在只要将给外围元素添 加一个“overflow:auto ”，就可以解决问题，结果是除了 IE，真的可以解决。下来就要解决 IE 的问题了，再加上“_height:1%”，这个问题就完全解决了。我试了一下，其实不加“_height:1%“在 IE 下也行，留着吧。六、需要注意的一些兼容细节1, FF 下给 div 设置 padding 后会导致 width 和 height 增加(DIV 的实际宽度=DIV 宽+Padding), 但 IE 不会.解决办法：给 DIV 设定 IE、FF 两个宽度，在 IE 的宽度前加上 IE 特有标记“ * “号。2, 页面居中问题.
12、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 的距离解决
13、办法：加上 display:inline，使浮动忽略这里细说一下 block,inline 两个元素 ,Block 元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是:和其他元素在同一行上,不可控制(内嵌元素);#box display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的的效果6 页面的最小宽度min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但 IE 不认得 min-这个定义，但实际上它把正常的 width 和 hei
14、ght 当作有 min 的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里 这两个值就不会变，如果只用 min-width 和 min-height 的话，IE 下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重 要的。解决办法：为了让这一命令在 IE 上也能用，可以把一个 放到 标签下，然后为 div 指定一个类： 然后 CSS 这样设计： #container min-width: 600px; width:expression(document.body.clientWidth 针对上面这段代码，下面说一下我的理解：第一、只要 right 定义了 width
15、 属性，在 FF 下绝对就会两行显示 第二、两个 width 都定义为百分比的话，就算都为 100%在 IE 下也会一行显示。所以上面那句所谓“这句是关键”根本没用，不加也在一行，除非你 width 定义的是数值才用得上。所以说上面这段代码其实用处不大，至少在 FF 下不行。其实只要只定义 left 的 width 就行了，right 不定义 width 就不管在 IE 还是 FF 下都能成功，但这样的话父 DIV BOX 并没有真正的包含 LEFT 和 RIGHT 两子 DIV,可以用我上面说的第 5 种办法解决。最简单的办法就是在 RIGHT 中加上 float:left 就 OK 了，真
16、磨叽！9,截字省略号.hh -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾。技术是好技术，很多人都喜欢乱用，但注意 Firefox 并不支持。页面加上这句就可以让页面兼容 IE7了供参考！ 给大家提醒一个漂浮需要注意的问题 注意设置 DIV 宽和高 注意设置overflow:hidden; 注意闭合针对火狐 父 div 样式 display:inline-block;Div+CSS 教程：如何闭合浮动元素？
17、 (参考文章)按照 CSS 规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，所以我个人不大喜欢。 后来又有了一种新的方式，使用 :after 伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用 CSS 生
18、成，但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证 html 比较干净，所以用得还是比较多的。 再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素，IE 自然又是不支持的，所以这种方法和上一种方法一样都对 IE 做了不同处理（具体就是触发 layout） ，不同的就是 overflow 没有 :after 伪类那么麻烦了，缺点也有，overflow 可能会产生一些小冲突。 在使用 overflow 之前还有过一种使用 float 的
19、方法，就是让父容器也浮动，这利用到了浮动元素的一个特性浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。使用 float 虽然在 IE 和标准兼容浏览器中都能闭合浮动元素，但原理却是不同的，IE/Win 中 float 触发了 layout 因而闭合了浮动，而在标准兼容浏览器中，float 其实和上一种方法中的 overflow 原理一样，产生了一个“块级格式化范围”这是 CSS 规范中提到的一种现象，它往往具有某种独立性，特性之一就是会自动闭合内部的浮动元素
20、。 按照规范，以下类型的元素会产生一个块级格式化范围： 浮动元素， left 或者 right 皆可。 绝对定位的元素。 inline-block 元素，不过这个 gecko 目前不支持。 table-cell 类型元素，其实 table, table-head-group, table-row 什么的也都可以，还有inline-table（gecko 不支持）也同样，因为他们都会间接产生一个匿名的 table-cell。 overflow 取值非 visible 的元素。 所以，原来在标准兼容浏览器中我们也可以有这么多的方法闭合一个浮动元素，而且只需要 CSS，无需其他。顺带说一下以上除了
21、overflow，其余都有一个附加效果就是自动收缩父容器宽度。 而对于 IE/Win，它有一套自己的体系，就是 layout，具有 layout 的元素会自动闭合浮动元素，再来看看触发 layout 的 CSS 属性，会发现和上面的块级格式化范围有很多类似之处： 浮动元素 绝对定位元素 display:inline-block zoom width/height overflow/overflow-x/overflow-y IE7 新增 max/min-width/height IE7 新增 以上来看 IE 中闭合浮动元素的方法也不少，自然也都有其局限性，要么有附带效果，要么使用的是非标准属性
22、（无法通过验证） 。 还要提一点的是 display:inline-block，这个属性对 IE 而言本身没什么用，实际效果只是给一个元素暗地添加了 layout，但是标准兼容浏览器是认得这个属性的，所以要不影响这些浏览器，需要将 display 设回默认。这里 IE 有一个 bug，如果先定义了 display:inline-block，然后再将 display 设回 block（这两个 display 要先后放在两个 CSS 声明中才有效果） ，那么 layout 不会消失，同时也不会影响其他浏览器，所以目前来说，这也算一个不错的触发 layout 的方法： .gainlayoutdisplay:inline-block; .gainlayoutdisplay:block; 所以要跨浏览器闭合浮动元素，可以选择的方式还是很多的，如何搭配使用这些 CSS 属性就要具体情况具体分析了，灵活应用条件注释也很有必要，要是实在不行我们回过头来还有 clear 可以用嘛。
