CSS 兼容问题

图片的边框

图片添加链接在 IE 中会出现边框线：给图片标签设置

border:none;

IE 低版本的兼容

• 小高度（IE6-）

font-size:0px;
line-height:0px;

• IE7- 子标签相对定位时，父标签的 overflow:hidden 属性失效

position: relative; /* 给父元素添加解决 */

• IE6- 浮动时会产生双倍边距的 bug IE7- 块转行内块不会在一行上显示

display:inline-block;
*display:inline;
*zoom:1;

IE7- 当 li 中出现两个或以上的浮动时，li 之间会产生空白间隙

vertical-align:top/bottom/middle;

CSS Hack

条件 Hack

<!--[if ie]>
  <style>
    选择器{声明;}
  </style>
<![endif]-->

用于选择浏览器及浏览器版本

• gt：大于
• gte：大于等于
• lt：小于
• lte：小于等于
• !：非指定版本

属性 Hack

• IE6- 属性前
• IE7- 属性前
• IE8-9 属性值后

选择符Hack

IE6-
.box{
  background:yellow;
}
IE7-
.box{
  background:green;
}