自己收集平时用到的技巧

（1）清除浮动的样式

一般我只用一个clear:both;就觉得可以清除浮动了但是最近发现一个通过after伪类:after和IEhack来实现，完全兼容当前主流浏览器的样式，但是我不清楚为什么要这么做希望高手指点一二

.clearfix:after{

content:"020";/注释这句我就不懂为什么要这么写/

display:block;

height:0;

clear:both;}

.clearfix{zoom:1;}/*这句也不明白了*/

（2）向大家介绍下自己做WEB前端用到的工具，大家也可以晒晒

①不用说了PS【用来切割图，做界面只用】

②火狐浏览器中的fireBug插件，一般哪边有错以及计算实际宽度都要用到

③IETester,我用其来测试IE6、7、8的 兼容性问题

④ColorSchemer ColorPix【一款小巧的Color Picker, 能够随着您鼠标的移动迅速的抓取屏幕颜色, 并将其转换为不同格式的颜色标识, 其优点是无需安装, 只需下载直接运行, 使用时, 可以设定不同的缩放程度, 一边夺取等精确的颜色信息, 合适的时候, 单击就可以把当前颜色代码复制到剪贴板, 此外, 改程序可以被设定为”置顶”,位于所有程序的窗口的上方】

⑤http://www.net2ftp.com/index.php，一般我有N多网站需要进行管理的时候我就用到这个小工具它是基于Web的FTP客户端, 仅仅利用浏览器就可以轻松的管理您的网站, 特别适用于那些服务器托管的网站管理员, 使用它可以随意的编辑代码, 上传/下载文件, 拷贝/移动/删除/重命名 文件或者目录。

(3)以前老有童鞋说整理的不够完整现如今俺就把BUG+实例重新搞一遍！也正好巩固下我自己的东西

①双倍距离的问题【元素是浮动的】

重要的是IE低版本有个双倍距离的Bug，例如IE6已经IE6以下的版本都有这个版本大家可以去自己测试一下。

我只要在样式内添加#Content{ float: left;
    width: 500px;
    padding: 10px 15px;
    margin-left: 20px; background:#000;color:#fff;display:inline; }即可解决这一问题

②克服盒模型Hack

div是块级元素

大家都知道div默认的宽度就是100%,如果你想给Div制定宽度，不要制定padding或者margin。只需要另建一个内部(嵌套)的没有宽度的div并设定其padding和margin来替代所以不要这样做

#main-div{
width: 150px;
border: 5px;
padding: 20px;
}

#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}

③min-height属性在firefox下表现很好但是IE却无视了它，IE的height就像FF的min-height.注意：IE7没有这个bug

/* 对主流浏览器 */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* 对IE浏览器 */
/*\*/
* html .container {
height: 8em;
}
/**/