一、margin问题

1. 上下margin重叠问题，即给相邻的两个div设置margin-bottom和margin-top时，默认取他们两个中的最大值作为最终的间距

解决方案:
    <1>. 选取其中的一个值设置即可 

2、margin穿透问题-子元素的margin-top会出现在父元素的上方

解决方案:
  <1>. 给父容器添加 overflow: hidden; 属性，原理:触发BFC机制
  <2>. 给父容器添加 border-top: 1px solid transparent; 
  <3>. 使用父容器的 padding-top 属性来代替子元素的 margin-top

二、display:inline-block 问题

1. li 元素设置 display:inline-block; 之后，相邻的li元素之间会出现间隙。

产生原因:代码中的空格和换行符导致的
解决方案:
  <1>. 父容器设置 font-size: 0; 然后在给其内部的元素分别设置需要的字体大小即可
  <2>. 使用浮动来代替 display: inline-block;

2. display: inline-block 在IE低版本中不兼容

解决方案:
   在使用 display: inline-block; 时，加上 *display: inline; 和 *zoom: 1; 即可

三、图片问题

1. 加链接的图片，在IE低版本中出现蓝色边框

解决方案: 给 img 标签设置 border: 0 none; 即可

2. img属于行级块元素，有时图片之间会出现间距

解决方案: 给 img 标签设置浮动: float: left | right; 即可

3. 在IE6和FF中，有时图片下方会出现一条间隙

解决方案: 给 img 标签设置 vertical-align: top | middle | bottom;  即可

4. IE中的背景图片无法使用 background-size 来实现平铺

解决方案: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./imgs/bigImg.jpg',sizingMethod='scale');

四、透明度问题

• opacity属性不兼容IE8及以下版本的浏览器

解决方案: filter: alpha(opacity=50);
  ps: 此处的透明度取值范围: [0, 100], 而正常情况下的取值范围为: [0, 1]

五、chrome最小字体12px, 不能直接设置更小字体

解决方案: 事先计算出来文字的大小，然后使用css3的缩放功能，transform:scale(0.8)