一、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; /*自动换行*/
css技巧及兼容性问题(常见IE兼容问题)解决