css常见hack兼容性问题及解决方案整理

1. 不同浏览器的标签默认的外边距 ( margin ) 和内边距 ( padding ) 不同

    解决方案一： css 里增加通配符 * { margin: 0; padding: 0; }

    解决方案二： body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin: 0; padding: 0; }

2. 在 IE6及以下版本中设置了 float，同时又设置 margin，就会出现双边距浮动问题

    问题描述：任何浮动的元素上的外边距加倍

    解决方案：在 float 的标签样式控制中加入 display: inline; 将其转化为行内属性

3. IE6下默认有行高

    解决方案：overflow: hidden;或 font-size: 0; 或 line-height: xx px;

4. 图片默认有间距

    解决方案：使用 float 属性为 img 布局

5. IE6及以下版本，不支持最小高度 min-height

       问题描述：IE6不支持 min-height 属性。即使定义了元素高度，如果内容超过元素的高度，IE6在解析时，会自动延长元素的高度

    解决方案：利用 IE6 不识别 !important，给元素设置固定高度，并且设置元素高度自动。height: auto !important; height: 300px; min-height: 300px; IE7 及其其他浏览器都识别 !important，虽然定义了 height: 300px，但是 !important 的优先级最高。所以内容超过 300px 时，还是会自动延长。

6. IE8及以下版本不支持 opacity

    解决方案：opacity: 0.5; filter: alpha(opacity = 50); -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity = 80)”;

7. IE6以下的 3 像素问题

    问题描述：两个相邻的 div 之间有3个像素的空隙，一个 div 使用了 float，而另一个没有使用产生的。

    解决方案一：对另一个 div 也使用 float

    解决方案二：给浮动的 div 添加属性 margin-right: –3px，但是这样写，在其他浏览器又会不正常，所以我们需要添加 IE6 的 hack，在属性 margin-right 前添加下划线 margin-right: –3px。（ IE6 以及更低版本的 hack，是在属性前面添加下划线）

8. 块级元素上下边距合并问题

    问题描述：当上下相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值

    解决方案：可以给子元素添加一个父元素，并设置该父元素：overflow: hidden;

9. IE9 以下浏览器不识别 HTML5 新增标签问题

    解决方案：

<!--[if lt IE 9]>
 	<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

10. margin 塌陷问题

    问题描述：如果一个大盒子中包含一个小盒子, 给小盒子设置 margin-top 大盒子会一起向下平移

    解决方案一：给父盒子加一个边框 border: 1px solid black;

    解决方案二：给父盒子加 padding-top: xx px;

    解决方案三：给父盒子设置属性 overflow: hidden;

    解决方案四：给父盒子设置浮动 float: left;

    解决方案五：给父盒子设置为行内块 display: inline-block;

11. 清除浮动

    问题描述：浮动元素撑不开父级容器

    解决方案一：额外标签法。在浮动的盒子内部最后，再放一个块级标签，在这个标签内使用 clear: both;

    解决方案二：使用 overflow 清除浮动。在父元素中添加一个属性 overflow: hidden;

    解决方案三：使用伪元素清除浮动。

.clearfix::after {
	content: "";      /* 伪元素必须给这个content='' */
    display: block;   /* 必须块级才能清除 */
    clear: both;      /* 核心代码 */
    /* 保证伪元素在页面中看不到 */
	height:0;
    line-height:0;
	visibility:hidden;
}
/* 兼容 IE 67 */
.clearfix {
  *zoom: 1;
}

      解决方案四：给父盒子设置高度

IE属性过滤器（较为常用的hack方法）

浏览器CSS兼容前缀

-o-transform: rotate(7deg);        // Opera
-ms-transform: rotate(7deg);       // IE
-moz-transform: rotate(7deg);      // Firefox
-webkit-transform: rotate(7deg);   // Chrome
transform: rotate(7deg);           // 统一标识语句