兼容性及经验汇总

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

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

IE6 div浮动时，margin双倍边距bug+
IE6及早期版本 无法直接定义较小高度的容器+
IE6 span a等行内元素空格或者回车出现3像素空隙+

IE7及以下版本 两个以上li浮动，li之间出现空白间隙bug+
解决方案：li{vertical-align:top;}

IE6 li内，定义display:block的内联元素底部产生空白+
解决方案： 给li内的内联元素，加上zoom:1

IE6 模拟min-height效果+
解决方案：min-height:100px;_height:100px;

IE6 文本溢出，多出一个文字BUG+
原因：浮动，注释，宽高定义
解决方案：删除出现bug的元素之间的注释

使用滤镜PNG图片透明后，容器内链接失效+
原因：浮动，注释，宽高定义
解决方案：为容器里面的a加个_position:relative样式

IE6 无法识别伪对象:first-letter/:first-line+
解决方案： 选择符与“{”之间增加空格，或者换行。

IE6 忽略同一条样式体内的!important规则+
解决方案： 将该样式拆分为2条，!important单独书写

IE7及以下版本 元素设置了position:relative;相对定位，父级元素overflow:auto|hidden失效+
解决方案： 给父级元素增加position:relative

img图片下方出现几个像素间隙+
解决方案： img{display:block;}或者img{vertical-align:top;} 在或者 img{font-size:0}

如何让文本垂直对齐文本输入框？+
解决方案： input{vertical-align:middle;}

如何让单行文本在容器内垂直居中？+
解决方案： 设置文本的行高等于容器的高度。举例：height:25px;line-height:25px;

IE下 如何设置滚动条的颜色+
解决方案：定义html标签

html{

    scrollbar-3dlight-color: #999;

    scrollbar-darkshadow-color: #999;

    scrollbar-highlight-color: #fff;

    scrollbar-shadow-color: #eee;

    scrollbar-arrow-color: #000;

    scrollbar-face-color: #ddd;

    scrollbar-track-color: #eee;

    scrollbar-base-color: #ddd;

}

强制文本溢出一行显示+

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

如何使文本溢出边界显示为省略号+

解决方案： 设置容器宽度，设置文本一行显示，溢出截断并显示省略号。例子：

.test {
    width:150px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

IE下 iframe背景透明+

解决方案： 设置iframe元素的标签属性allowtransparency=”allowtransparency”然后设置iframe内部页面的body背景色为transparent。引发的问题：设置透明后的iframe将不能遮住select
各个浏览器 opacity透明问题+

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

IE6下 png背景透明+

解决方案： 调用DD_belatedPNG_0.0.8a-min.js插件

让连续的长字符串自动换行+

解决方案： word-wrap:break-word;

去掉超链接的虚线框+
解决方案：

a {
    outline:none;
    blr:expression(this.onFocus=this.blur());
}

网页水平居中+

解决方案：

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

如何让table边框1个像素细+

解决方案：

table{
    border-collapse:collapse;
}

table th,table td{
    border:1px solid #ddd;
}

网页去色，让网站显示灰色+

解决方案：

*{
    filter:gray;
    color:gray;
}

html {     filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

两个相邻块级元素，都设置了margin，间距只有最大一个，间距不会相加。+