css兼容

css兼容问题

css Hack是一种改善css在不同浏览器下表现形式的技术

• IE6认识： selector{property:value;}（）
• IE7认识： selector{+property:value;}(+)
• IE8认识： selector{property:value\0;}(\0)
• IE6 & IE7认识： selector{*property:value;}
• IE6 & IE7 & IE8都认识： selector{property:value\9;}

1. 条件注释：

<!--[if IE 8]>
         IE版本是8.0
<![endif]-->

<!--[if lte IE 7]>
            IE版本小于等于7.0
<![endif]-->

<!--[if lte IE 9]>
            您的IE版本太低，请安装更高版本，<a href="#">下载地址</a>。
<![endif]-->

1. meta
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">

1.上下margin重合问题：上下外边距合并，会以大的那个值为准。
解决办法就是相邻的margin-top margin-bottom二选一。
2. margin-top: 子元素的margin-top,会出现在父元素的上方
解决办法：

(1) 给父元素加 overflow:hidden;

(2) 给父元素设：border:1px solid transparent
(3）用父元素的padding-top来替代子元素的margin-top （最佳方案！）
3.行内元素与行内元素，行内块与行内块，行内块与行内元素之间 会出现缝隙
解决办法：
（1）给行内元素或行内块元素的父元素 font-size:0 给子元素重新设置字号
（2）给行内或行内块元素添加浮动
4. 元素设置了: display:inline-block后，由于元素默认基线对齐，在父元素中的垂直位置不对照；
解决办法：给当前元素添加 ： vertical-align:top | middle | bottom
5. display:inline-block: 在IE7中不兼容，会导致在其它浏览器整齐的排版变得混乱
解决办法：
凡是用display:inline-block时，同时加上 display:inline; zoom:1
(以开始的选择器只有ie6,ie7会执行，其它浏览器会忽略;触发了IE的hasLayout属性;)
hasLayout属性是微软特有的过时属性，在IE8、IE9中，hasLayout属性已经被废弃。上文中的InternetExplorer都是指IE7、IE6及以下版本。
6. 加链接的图片，在低版本IE中显示蓝边框：
解决办法：

img {
border:none;
}
7.块元素中装图片，图片下方会出现一条间隙，比如