css中IE浏览器兼容问题

兼容问题

• ie中图片边框问题
  ie中图片放在a标签中时显示边框
  解决：img{
  border:none
  }
• ie8以下浏览器中背景复合属性写法的问题
  正常：background:url("")no-repeat center;
  ie中这样写图片会显示异常
  解决：background:url("") no-repeat center;
• 其他ie低版本兼容性问题

  1. 在IE6中定义小高度的容器
     IE6及更早浏览器中，默认最小高度19px，小于19px显示为19px
     解决：
     p{
     
     height:1px;
     font-size:0;
     line-height:0;
     }

  2. IE6及更早浏览器，浮动时产生双边距的BUG
     解决：
     p{
     float:left;
     _display:inline;
     }

  3. IE7，子标签相对定位时父标签overflow属性的auto | hidden失效的问题
     解决：给父标签也设置相对定位

  4. IE7中，块转行内不在一行显示问题
     解决：
     div{
     display:inline-block;
     *display:inline;
     }

  5. IE7及更早浏览器中，当li中出现2个或两个以上浮动时，li之间产生空白间隙
     解决：将垂直对齐方式设置为top | middle | bottom。

  CSS hack

  使用CSS hack 可以控制不同浏览器及版本之间的显示差异，某些特殊情况下使用事半功倍，但是滥用会影响页面性能，后期维护困难，尽量减少使用。
• IE条件注释法（hack）
  用于选择IE浏览器及IE的不同版本
  if条件Hack是HTML级别（不但是CSS的hack，也可以选择HTML代码块）
  if条件包含6种选择方式：是否，大于（gt），大于或等于（gte），小于（lt），小于或等于（lte），非指定版本（！）
• 选择器前缀法（属性Hack）
  在css样式前或值后加上一些只有特定浏览器才可以识别的hack前缀或后缀

1. _ ：下划线：选择ie6及以下;
2. • ：减号，选择ie6及以下;
3. • ：IE6，7;
4. \0：选择ie8以上；值后;
5. \9： ie6及以上;
6. \9\0： ie9,10;

• css属性前缀法（选择器符Hack）

1. *html : ie6
2. *+html : ie7