css技巧及兼容性问题(常见IE兼容问题)解决

一、css技巧及兼容性问题解决

1、清除图片下方出现几像素的空白间隙

方法1：将图片显示为块

  img{display:block;}

方法2：改变图片的vertical-align

  img{vertical-align:top;}
    /*除了top值，还可以设置为text-top | middle | bottom | text-bottom等 */

方法3：设置图片父元素的font-size:0; line-height:0;

  .imgwrap{font-size:0; line-height:0;}
   /* .imgwrap为img的父元素*/

方法4：为img父元素定高并overflow:hidden;

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

  #test{height:25px;line-height:25px;}
    /*只需设置文本的行高等于容器的高度即可*/

3、定义鼠标指针的光标形状为手型并兼容所有浏览器？

#test{cursor:pointer;}

4、已知高度的容器在页面中水平垂直居中（绝对居中）？

#test{ position:absolute; top:50%; left:50%; width:200px; height:200px; margin:-100px 0 0 -100px; }

5、IE6及更早浏览器浮动时产生双倍边距的BUG？

#test{ _display:inline; }
  /*设置该元素的display属性为inline即可。*/

6、IE6及更早浏览器中定义小高度的容器？

#test{overflow:hidden; height:1px; font-size:0; line-height:0;}

7、在IE6及更早浏览器下模拟min-height效果

  #test{min-height:100px;  _height:100px;}
    /*注意#test不能设置overflow的值为hidden，否则模拟min-height效果将失效*/

8、IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙

  li{vertical-align:top;}
  /*除了top值，还可以设置为text-top | middle | bottom | text-bottom等*/

9、解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题

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

10、iE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题

解决方案：为父元素设置相对定位position:relative;

11、IE6下的文本溢出BUG(叠影重重)

   .test{ zoom:1; overflow:hidden; width:500px; }
   .box1{ float:left; width:100px; }
   .box2{ float:right; width:400px;  }
   <div class="test">
	<div class="box1"></div>
	<!-- 注释 -->
	<div class="box2">内容</div>
   </div>

12、使连续的长字符串自动换行(防止页面中出现连续无意义的长字符打破布局)

  word-break:break-all;  /*自动换行*/