前端零碎问题（一）css hack

hack技术主要针对IE浏览器，尤其是低版本的IE，说实话，微软都觉得自己的低版本浏览器渣渣了，我们还要兼容，感觉到了深深的恶意，

1）: png-24 图片 IE6 不支持，使用 png-8 的图片来解决，或者 做两张图片，分别使用

2）: 浮动元素 margin 值加倍，给元素增加 display: inline 或 display: inline-block 属性。

3）: 图片有个 3px margin，增加属性 margin: -3px;

4）: 条件注释：

<!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]-->
<!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]-->
<!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本（不包含IE6）。 <![endif]-->
<!--[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]-->
<!--在 IE6及IE6以下版本中加载css-->
<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->

缺点是在IE浏览器下可能会增加额外的HTTP请求数。

5）： 通过选择器区分

/* 1、区别IE和其他浏览器 *，IE 都认识，其他浏览器不认识 */
.demo{
    *background: red;
    background: blue;
}
/* IE 浏览器里面是红色，其他浏览器是蓝色的 */
/* 2、区别IE6，IE6 不能识别 !important */
/* 3、区别 IE6，IE6 可识别_ */
.demo{
    _color: red;
    color: green;        
}    
/* IE6 颜色为红色，其他浏览器为绿色 */

6）: IE 低版本下的圆角，用图片来写，或者优雅降级（IE 低版本里面用直角）

7）: IE6背景闪烁

如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：document.execCommand("BackgroundImageCache",false,true);

8): 最大、最小高度、宽度，利用js来处理，或尽量避免使用最大、最小宽高

9): 100% 高度，IE6 认为是父级的100%，因此要给 html、body等分别设置宽度为100%

10): 清除浮动

如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。

.container {border:1px solid #333; overflow:auto; height:100%;}
.floated1 {float:left; height:300px; width:200px; background:#00F;}
.floated2 {float:right; height:400px; width:200px; background:#F0F;}