ie6.0 CSS 浏览器兼容问题的个人总结与 HACK 方法分享
1. CSS黑客
以下两种方法可以解决目前几乎所有的HACK。
1、！
随着IE7对!的支持，!方法现在只针对IE6的HACK了。（注意写法，记住声明位置要靠前。）
2.IE6/IE77
仅限 IE6
：100像素；
仅限 IE6
*：100像素；
仅限 IE7
+: 100像素；
IE7、FF 共享
：100像素！；
*+html 和 *html 是 IE 特定的标签，尚不受支持。*+html 也是 IE7 特定的标签。
注意：
*+html HACK for IE7 必须确保以下语句位于 HTML 顶部：
“>
2. 通用浮动关闭
清除浮动的原理请参考[如何清除]
将以下代码添加到CSS中，并将其添加到需要关闭的div中。 每次都有效。
3. 其他兼容性提示
1. 在FF中设置div宽度会增加，但在IE中不会。（可用！解决方案）
2.定心问题。
1). 垂直居中。将 line- 设置为与当前 div 相同的高度，然后使用 -align:。（注意内容不要换行。）
2). 水平居中: 0 auto;(当然不是通用的)
3.如果需要给a标签内的内容添加样式，需要设置：block;（常用于导航标签）
4、FF与IE对BOX理解上的差异，导致有2px的差别，且设置为float的div在IE中大小翻倍。
5. ul标签在FF下默认带有list-style，最好提前声明，避免不必要的麻烦。（常见于导航标签、内容列表）
6.作为外部div，不要设置固定高度，最好加上： . 来实现高度自适应。
7. 关于手形光标。： 手形光标仅适用于 IE。
1 适用于 IE6 和 IE7 的 CSS 样式
现在大多数人都使用 ! 来 hack，它可以在 IE6 和测试中正常显示，
但是IE7能够正确解释它，这将导致页面不能按要求显示！
针对IE7的一个好办法是使用“*+html”。现在用IE7浏览应该没有问题。
现在你可以编写如下 CSS：
#1 { 颜色：#333; } /* Moz */
* html #1 { 颜色：#666; } /* IE6 */
*+html #1 { 颜色：#999; } /* IE7 */
则字体颜色在IE6中显示为#333，在IE6中显示为#666，在IE7中显示为#999。
2 CSS 布局中的居中问题
主要样式定义如下：
正文 {TEXT-ALIGN: ;}
# { -右：自动；-左：自动； }
阐明：
首先在父元素中定义TEXT-ALIGN:；这个意思是父元素内的内容居中；对于IE来说这个设置已经足够了。
但是无法居中，解决办法是在定义子元素时加上“-RIGHT: auto;-LEFT: auto;”。
需要注意的是，如果要用此方法让整个页面居中，建议不要放在一个DIV里，可以拆分成多个div依次排列。
只需在每个分隔的 div 中定义 -RIGHT: auto;-LEFT: auto; 即可。
3 盒子模型的不同解释
#box{ width:600px; //适用于 ie6.0- width:500px; //适用于 ff+ie6.0}
#box{ width:600px! //适用于 ff width:600px; //适用于 ff+ie6.0 width /**/:500px; //适用于 ie6.0-}
4 浮动即产生的双倍距离
#box{ float:left; width:100px; :0 0 0 100px; // 这种情况下 IE 会生成 200px 的距离:; // 使浮动被忽略 }
这里我们来详细说一下block这两个元素，Block元素的特点是：总是从新行开始，且高度、宽度、行高、边距都可以控制（块元素）；元素的特点是：和其他元素在同一行，……无法控制（嵌入元素）；
#box{ :block; //可以为内嵌元素模拟块元素 :; //实现排列在同一行的效果 :table;
IE 无法识别 min- 的定义，但实际上它会将正常宽度视为存在最小条件。这是一个大问题。如果你只使用宽度和高度，
在一般的浏览器中，这两个值不会发生改变，如果只使用min-width和min-，就相当于没有设置IE中的width和。
例如，如果你想设置背景图片，这个宽度就比较重要。为了解决这个问题，你可以这样做：
#box{ 宽度：80px; ：35px;}html>body #box{ 宽度：自动; ：自动; 最小宽度：80px; 最小：35px;}
6 最小页面宽度
min-width 是一个非常方便的 CSS 命令，可以指定元素不能小于某个宽度，从而保证布局始终正确。但是 IE 无法识别这一点。
它实际上使用宽度作为最小宽度。要使此命令在 IE 上工作，您可以更改
将其放在标签下，然后为div分配一个类：
那么CSS设计如下：
#{ 最小宽度： 600px; 宽度：（.body. < 600？“600px”：“auto” ）;}
第一个min-width是正常的；但是使用了第二行的宽度，只有IE能识别，这样也会使你的HTML文档显得不那么正式。它其实就是通过判断来实现最小宽度的。
7 清除浮动
.{ :table; //将对象显示为块级表} 或 .{ clear:both;}
或者添加：after（伪对象）来设置对象之后发生的内容，一般配合IE使用，IE不支持这个伪对象，非IE浏览器支持。
所以对IE/WIN浏览器没有影响。这个最麻烦了...#box:after{ :"."; :block; :0; clear:both; :;}
8 DIV 浮动 IE 文本产生 3 像素错误
左侧对象浮动，右侧对象使用外部块的左边距进行定位。右侧对象中的文本与左侧将有 3px 的间隙。
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ -right:-3px; //这句话是重点}
HTML 代码
9 属性选择器（不兼容，这是隐藏 CSS 的一个错误）
p[id]{}div[id]{}
在 IE6.0 及以下版本中，此功能被隐藏ie6.0，FF 和 OPera 不使用此功能。
属性选择器和子选择器是有区别的，子选择器在形式上作用域比较窄，而属性选择器的作用域比较大，比如p[id]中，所有带有id的p标签都是同一个样式。
10. IE 捉迷藏问题
当div应用比较复杂，每列都有一些链接的时候，DIV容易出现捉迷藏的问题。
部分内容无法显示，当你用鼠标选中这个区域时，你会发现这些内容确实在页面上。
解决方案：对 # 使用 line- 或对 # 使用固定高度和宽度。保持页面结构尽可能简单。
11 身高不适
高度不适应性是指当内层物体高度发生变化时，外层高度不能自动调整，尤其是当内层物体使用
或者时间。
例子：
p 对象的内容
样式表：
#box {-color:#eee; }
#box p {-top: 20px;-: 20px; 文本对齐：; }
解决方法：在P对象的上下分别添加两个空的DIV对象。CSS代码：.1{:0px;:;} 或者给DIV添加属性。
/*IE 和 CSS 兼容性列表*/
1.影响CSS处理
2.FF: 当-left和-right设置为auto时，div已经居中，但是IE不起作用
3.FF:在body上设置text-align时，div需要设置为：auto（主要是-left，-right）才能居中
4.FF:设置之后div会增加和width,但是IE不会,所以需要使用!多设置一个和width
5.FF：支持！IE忽略，可用！FF特殊样式设置
6.div垂直居中：-align:;把行距增加到和整个DIV行等高-:200px;然后插入文字，就垂直居中了，缺点是需要控制内容不换行
7.：可以同时在IE FF中显示光标手指，手仅在IE中可用
8.FF：给链接添加边框和背景色，需要设置：block，并且设置float:left，保证不换行。参考设置a的高度，避免底边错位。如果不设置，可以在中间插入空格。
9.IE对BOX模型解释不一致导致2px差异的解决方法：
div{:30px!;:28px;}
10.IE5与IE6的BOX解释不一致
IE5
div{宽度：300px；：0 10px 0 10px；}
div 的宽度会被解释为 300px-10px(right )-10px(left )。div 的最终宽度为 280px，而在 IE6 等浏览器上宽度计算为 300px+10px(right )+10px(left )=320px。此时，我们可以进行以下更改
div{宽度：300px！；宽度/**/：340px；：0 10px 0 10px}
这里使用 CSS 注释来分隔属性和属性值。注释放在冒号之前，以阻止 IE6。
11. ul标签在IE中默认是有值的，但是只有在IE中才有值，所以要先定义
ul{:0;:0;}
可以解决大多数问题
防范措施：
1.浮动div必须关闭。
例如：（其中的属性已设置为 float:left;）
这里我们不想继续水平移动，而是想向下移动。
这段代码在IE下没问题，但是在FF下就出问题了，原因是它不是浮动标签，而浮动标签必须关闭。
存在
添加
一定要注意声明这个div的位置，一定要放在最合适的地方，并且必须和两个float属性的div处于同一层级，它们之间不能有嵌套关系，否则会抛出异常。
并定义清晰的样式如下：
。清除{
清除：两者；}
另外为了让高度自动适应，添加：；
当盒子包含浮动时，IE 中自动高度适配失效，这时候就要触发 IE 的私有属性了（该死的 IE！），可以使用 zoom: 1; 来实现，从而达到兼容的目的。
例如这样的定义：
{
：；
缩放：1；
:5px 自动；}
2.加倍问题。
浮动div在IE中会放大一倍，这是IE6存在的bug。
解决办法是添加这个div：
例如：
对应的 css 是
#{
向左飘浮;
:5px;/*IE 将其理解为 10px*/
:;/*IE 会将其解释为 5px*/}
3.关于容器的包含关系
通常，尤其是当容器中有平行布局时，例如两个或三个浮动 div，很容易出现宽度问题。在 IE 中，外层的宽度将被更宽的内部 div 挤压。始终使用或测量像素级精度。
4. 关于身高的问题
如果是动态添加内容，最好不要定义高度。浏览器可以自动扩展和收缩，但如果是静态内容，最好设置高度。（好像有时候不会自动向下扩展，不知道是怎么回事）
5.最狠的手段——！；
如果有些细节实在没办法解决，可以用这个方法，FF会自动优先解析“！”，而IE则会忽略。
.tabd1{
:url(/res//up/tab1.gif) no- 0px 0px !; /*FF 样式*/
:url(/res//up/tab1.gif) no- 1px 0px; /* IE 样式 */}
一些小技巧：
屏蔽IE浏览器（即不会在IE中显示）
*:lang(zh) {font:12px !;} /*FF,OP可见*/
:empty {font:12px !;} /*可见*/
这是选择器，根据情况改吧。第二句是MAC浏览器独有的。
仅 IE7 识别
*+html{…}
当您只需要为 IE7 创建样式时可以使用此兼容性。
IE6及以下版本识别
* HTML {…}
这个地方要特别注意，很多楼主写着兼容IE6，其实IE5.x也能识别这个兼容，其他浏览器识别不了。
html/**/>主体{……}
这句话和上一句功能相同。
只有IE6不能识别
{/*IE6 无法识别*/:none;}
这里，CSS 注释用于分隔属性与其值，并放在冒号之前。
只有IE6和IE5不能识别
/**/ { /*IE6,IE5无法识别*/:none;}
这句话和上一句的区别在于，在选择器和花括号之间多了一个CSS注释。
只有IE5不能识别
/*IE5 无法识别*/ { :none;}
这句去掉了上一句中属性区域的注释，只有IE5不识别
盒子模型解决方案
选择 {width:IE5.x 宽度; voice- :""}""; voice-:; width:正确宽度;}
盒子模型的清除方法不由 ! 处理。这一点应该明确。
清除浮动
:after {:"."; :block; :0; clear:both; :;}
在 中，当所有子元素都是浮动的时候，父元素的高度无法完全覆盖整个子元素，这种情况下使用这个明确的浮动兼容性，定义一次父元素，就可以解决这个问题。
截断省略号
{ -o-文本-:; 文本-:; 空白::; }
这是个很好的技术，当长度超过限制时会自动截断多余的文字，并以省略号结束。不过目前还不支持。
仅 Opera 识别
@media all and (最小宽度：0px) { { … } }
对 Opera 浏览器进行单独设置。
以上是一些用 CSS 写成的兼容，建议遵循正确的标签嵌套（div ul li 嵌套结构关系），这样可以减少你使用兼容的频率。不要陷入误区（不是一个页面需要很多兼容才能维持多浏览器兼容），很多时候浏览器可能没有任何兼容也能运行得很好，这些都是用来解决局部兼容问题的，如果要把兼容内容单独拿出来，不妨试试下面这些过滤器，这些过滤器有些是用 CSS 写成的，通过过滤器导入特殊样式，有些是用 HTML 写成的，通过条件链接或导入需要的补丁样式。
IE5.x 过滤器，只有 IE5.x 可以看到它
@媒体 tty {
我{：“”; / *“”* /}} @'.css'; /*”;}
/* */
IE5/MAC 过滤器通常不需要
/**//*/
@“。css”；
/**/
下面是针对IE的条件注释，个人认为使用条件注释来调用相应的兼容是多浏览器兼容比较完美的解决方案。将需要兼容的地方放在一个单独的文件中，当浏览器版本匹配时，就可以调用兼容的样式了。这样不仅使用起来非常方便，而且对于CSS本身的制作，可以更严格地观察是否需要使用兼容。很多时候，我写CSS的时候，把包括兼容在内的所有代码都写进一个CSS文件里，会很随意，想兼容就兼容，而当你独立写的时候，就会不自觉地考虑是否需要兼容，是先兼容CSS？还是调整主CSS的内容，要求尽可能少的兼容？当你只用少数的兼容，就能让很多浏览器都很好很听话的时候，是不是很有成就感？你懂得如何选择~~呵呵
IE 的 if 条件兼容，可以灵活使用。请参阅此 IE 条件注释
仅限 IE
所有 IE 都能识别
只有IE5.0可以识别
仅限 IE 5.0 以上版本
IE5.0可以用IE5.5替换。
只有IE6可以识别
仅限 IE 7/-
IE6 及以下 IE5.x 可以识别
仅限 IE 7/-
只有IE7可以识别
CSS中有很多东西如果不遵循一定的规则就会让你很烦躁，虽然你可以通过很多兼容来控制它，但是你会发现长此以往你会很不甘心。看看很多优秀的网站，他们的CSS让IE6、Ie7，甚至Opera都能完美运行，你是不是很羡慕呢？然而在他们看似复杂的模板下使用的兼容性却少得可怜。其实你应该知道IE和HTML并不是那么的不和谐，我们已经找到了一定的方法让它们和谐共存。不要以为找到了兼容的方法就掌握了一切，我们不是兼容性的奴隶。
div ul li 的嵌套顺序
今天我只讲一条规则。
专栏目录
