前端样式及技巧总结
总结IE与ff,chrome存在的差异或技巧或心得体会，我知道还有很多没总结出来，但后续学习到了会继续补充的~
1、ie6,ie7不支持对内联元素设置display:inline-block
对块级元素设置display:inline-block，ie6，ie7不支持。当您在ie7，ie6上浏览页面时，发现ul列表显示有异于ie8及以上,可能要考虑是否将li 设置了inline-block.
对内联元素设置display:inline-block，所有元素均支持。
2、ie6，ie7，ie8不支持rgba这种写法
在ie9及ie9以上对背景元素使用rgba这种写法是支持的，rgba是设置背景颜色并指定透明度。
为了兼容ie6-ie8,需要使用IE滤镜,如：
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
zoom: 1;
但若IE滤镜及rgba同时在一个class中运用时，在ie9会对filter及rgba均运用！！此时可以只对ie8及以下的浏览器加上IE滤镜，如在html中加上：
<style>
#route-pic p{
background:#000000;
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
zoom: 1;
}
</style>
<![endif] -->
3、ie6、ie7、ie8不支持html5标签，ie9及以上支持
若使用标签<header id="header"></header>,在ie6、7、8是不行的，即使对#header设置样式，该样式也不会生效；
4、 ie6，使用position：relative定位时，会失去布局，导致页面紊乱
通常会用到position：absolute来进行绝对定位，从而会用到position：relative来相对定位，这样绝对定位就有了参照点。如果不对运用了position：relative的元素重新拥有布局，你会发现在ie6下是无法达到效果的。因此若要兼容ie6，需要再次获取布局。获取布局可以通过设置zoom,height,width来得到；
如div{position:relative;*zoom:1;//other...}
5、外边距叠加
我们知道盒子模型是会进行外边距叠加的，若两个div都存在margin-top,则会进行外边距叠加，取其中较大的值作为margin-top.
举个例子：
<div id="b"></div>
</div>
#b{height:50px;width:50px;margin-top:15px;background-color:#fff;}
此时得到的效果就是元素b在a的上方，a，b有着15px的margin-top:
若想要实现b是相对于a margin-top为15px,而a marign-top为10px如下效果，需要对a设置边框或者内边距才能达成效果。
#b{height:50px;width:50px;margin-top:14px;background-color:#fff;}
或运用样式（对a添加边框）:（对a 添加样式border-top:1px;由于边框有1px高度，而b需要距离a15px高，因此b还需margin-top:14px）
#b{height:50px;width:50px;margin-top:14px;background-color:#fff;}
6、IE6的双外边距浮动bug
对一个块级元素进行float布局，当元素存在水平外边距(注意是水平哦，即margin-left,margin-right)时，在IE6显示下外边距会加倍。示例：
html片段：
<style type="text/css">
body{padding:0;margin:0;}
div{margin:20px;height:100px;width:100px;background-color:#ccc;float:left;}
</style>
</head>
<body>
<div>双外边距浮动</div>
</body>
在FF/IE6显示情况对比：
FF:
IE6:
解决办法：将元素的display设置为inline。因为元素是浮动的，设置元素的display:inline不会影响元素的显示方式。因此，每当对具有水平外边距元素进行浮动时，应将display设置为inline，以防止在IE6下水平外边距扩大影响布局。
7、IE6及IE6下的3px文本偏移
当文本和一个浮动元素相邻时，文本与浮动元素之间会出现一个3px间隙。一旦浮动停止，3px消失。
示例：
<div id="a"></div>
<p id="b">在IE6下，存在有3像素文本偏移的情况<br/>在IE6下，存在有3像素文本偏移的情况<br/></p>
</body>
#b{background-color:#fff;margin-left:100px;}
FF效果：
解决方法：首先需要给文本元素拥有布局，可以给文本元素设置height或width或zoom等触发拥有布局。如指定height:1%能消除文本偏移，但这可能会影响到其他浏览器的显示，但不会影响IE6及IE6以下显示，原因是IE6及IE6以下将height作为min-height那样对待。因此如果设置height:1%，需要专门针对IE6进行设置。其实可以使用*zoom:1px;也是能达到清除文本3px偏移这个问题的。
为b加上*zoom:1px后IE6显示效果为（中间有个3px的间隙）：
为了消除中间的3px的间隙，需要对a应用margin-right:-3px，另外还需对b重新设置margin-left:0,完整的样式为：
#b{background-color:#fff;margin-left:100px;*zoom:1;*margin-left:0;}
现在IE6表现的就正常了：
8、IE6下的“藏猫猫”bug
出现这个bug的条件：①有一个容器container，对它设置了背景颜色或图像，但没有设置width或height
②容器container内有浮动元素，紧跟在浮动元素后有一些不浮动的元素
③接着是清理元素
请看html片段：
<div id="float">浮动元素</div>
<div id="content">非浮动元素</div>
<div id="clear"></div>
</div>
CSS：
background:#eee;
}
#float {
float:left;
border:1px solid #000;
}
#clear {
clear:both;
border:1px solid #000;
}
IE6下的显示效果：
1)对父元素使用_height:1%或_zoom:1;
2)对父元素使用overflow:hidden用于清除浮动，而不用<div id="clear"></div>标签;
3)对父元素和浮动元素应用position:relative;
待续...
