首页 > IE6,7,8,FF兼容总结

IE6,7,8,FF兼容总结

做到浏览器兼容需要注意的四大要素(一)

2009-05-31 17:09

1 Css

1.1 选择器

通配符 * :: IE6不支持
类选择器 .class :: IE6元素的class不能超过2个
属性选择器 [att=value] [att] [att|=value] [att(^|$|~)=value] :: IE6不支持
关系选择器 E + F; E > F ; E ~ F :: IE6不支持

1.2 伪类

:first-letter,:first-line,:visited,:link :: 都支持
:hover :: IE6只支持A元素，IE7及FF支持A以外元素
:before和:after :: IE7和firefox支持，好好利用可以实现很多不错的效果

1.3 !IMPORTANT

突破样式表属性>ID>双CLASS>单CLASS>元素,后者>前者的层叠顺序,不过IE6不支持

1.4 DocType

文档类型决定了IE的渲染模式，标准模式(standard)还是兼容模式(quirks),并且声明必须放在所有代码之前,包括注释。">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看详情Quirks模式与Standards模式

盒模型标准模式,实际宽度=width+border-width+padding-width+margin-width 兼容模式下,实际宽度=width
水平居中 IE中,标准模式下可使用margin:0 auto水平居中。兼容模式下无效。
行内元素尺寸标准模式下不能设置span等行内元素的width和height，兼容模式下可以。
不正确的语法譬如未书写尺寸单位，大小写不正确，嵌套不正确等，兼容模式下尺寸采用默认单位px，其它的都尽量修正。标准模式下这条css规则无效。
相对高度元素设定百分比高度时，需要父元素高度已指定，所以最好先指定html和body元素高度为100%
IE7的新CSS特性 min/max-width/height,position:fixed,:hover,overflow:visible 等在兼容模式下会失效。
默认样式 FF下，在进入quirks模式后，会加载其目录下的res/quirk.css，设置一些其它的默认样式

1.5 属性

Z-INDEX SELECT元素浮动在其它元素的上方，不能改变z-index，必要的时候采用js来控制select的显隐达到需要的效果 FLASH默认的wmode为window模式，浮动在其它html元素的上方，指定z-index不会改变这种情况。需要将wmode指定为transparent或者opaque
- 元素级别层叠剖析
CURSOR FF 不支持cursor:hand,使用cursor:pointor
列表取消缩进 IE margin:0;FF padding:0

自动折行

DIV

 1 .wrap1 { 

 2     word-break:break-all;

 3     word-warp:warp;

 4     over-flow:auto!important;

 5     }

 6 .wrap2 { 

 7     white-spacing:normal;

 8     word-warp:warp;

 9     over-flow:auto!important;

10 }

TABLE
```
1 table{ 

2     table-layout:fixed;

3 }
```

固定宽度不折行

1 <td width="25%" nowrap><div>contentdiv>td>

空DIV仍占空间

1 .empty{ 

2     line-height:0%;

3     height:0px;

4     font-size:0pt;

5 }

1.6 滤镜(filter)

IE私有，效率也比较低，一般不建议使用。

透明

IE:

1 #id{  filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)}

FF:

1 #id{ opacity:0.6}

1.7 行为(behavier)

在css中使用js, IE特有,借此可实现max-width,min-width等效果，不过效率比较低.同时这里也是可能存在XSS攻击的地方.

1.8 Bug

高度不适应 :: 内层设完margin或者padding后比外层高度还高。解决方案:在内层上下各加一个空div.
容器不扩展 :: 内存浮动后，外层缩成直线。解决方案:内存结束时清除浮动。
margin加倍 :: 在IE 5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决
IE6 3px :: IE6中左浮动div右侧的文本和块与左div的距离会增加3px，解决方法给左侧的div增加margin-right:-3px;或者避免使文本直接与左div接触，同时右侧的块使用display:inline-block
IE6捉迷藏 :: 一个浮动元素后而跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的容器元素中。假如清理元素砬到了浮动元素，那么中间的非浮支元素看起来消失了，隐到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。解决方案:去掉背景或者容器指定宽高，或者指定行高，或者将浮动元素和容器元素的position属性设置为relative也会减轻这个问题。
IE6断头台 :: 当容器中左浮动对象右侧直接跟链接，并且链接的hover状态属性有变化的话，可能导致容器的高度重新计算，并切掉左浮动对象的部分内容。解决方案：浮动对象后面不直接跟非浮动对象，或者最后清除浮动。

1.9 css hack

@import
```
1 @import ("notIE.css") screen;
```

+_hack

1  #content { 

2      width:500px;

3      +width:480px;        4      _width:490px:        5  }