前端兼容性及经验汇总

• 浮动时，父级元素无法撑开   #

  .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}

   

• IE6 div浮动时，margin双倍边距bug#

  解决方案：为浮动的div加上display:inline;

   

• IE6及早期版本 无法直接定义较小高度的容器#

  原因：就算容器里什么都没有也会有行高

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

• IE6 span a等行内元素空格或者回车出现3像素空隙#

  有空隙 有空隙 有空隙

  没有空隙没有空隙没有空隙

• IE7及以下版本 两个以上li浮动，li之间出现空白间隙bug#

  解决方案：li{vertical-align:top}

• IE6 li内，定义display:block的内联元素底部产生空白#

    解决方案： 给li内的内联元素，加上zoom:1#

• 如何让单行文本在容器内垂直居中？#

  解决方案： 设置文本的行高等于容器的高度。举例：height:25px;line-height:25px;

   

  强制文本溢出一行显示#

  解决方案： 设置容器的宽度和white-space:nowrap

   

  各个浏览器 opacity透明问题#

  .test {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5}

   

• 网页水平居中#

  body{text-align:center} .wp{width:980px;margin:0 auto;text-align:left}