想请教下IE6 7 8 FF 4个浏览器 写DIV+CSS代码时需要注意的兼容性问题

使用hack解决IE5.x容器width解析bug IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+marginIE5.X
真实宽度=width-padding-border+margin方法1： div.content {
width:430px; //这个是错误的width(对于ie5来说是正确的），所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:400px; //包括IE6/win在内的部分浏览器读到这句，新的数值(400px)覆盖掉了旧的
}html>body .content { //html>body是CSS2的写法
width:400px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}
方法2： div.content {
width:400px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:430px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是400px；而IE5.X/win读到这句，新的数值(430px)覆盖掉了旧的，因为!important标记对他们不起作用
}html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
} 方法3： div.content {
width:430px; /*所有浏览器识别这个宽度，包括WIN IE5.5 IE5 IE4 NS4 Opera 5*/
w\idth:400px; /*WIN IE5.5 IE5 IE4 NS4 Opera 5不识别，其他的认为这是个正确的值*/
}html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}
方法4：
<!--[if Lte IE5]>
#content {
width:530px
}
<[!endif]-->
这里是一个width:400px;margin:10px;padding:10px; border:10px;的一个盒子，IE5.x Win解析不正常。IE6盒模型在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(DOCTYPE)声明，IE6才能够接受正确的box-model所以，hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作。

吃方便面的猪回答的很详细，但是我感觉写hack是实在没有解决问题的方法下，才写hack的，如果能写得标准，尽量别去写hack。 标准的写法就是根据文章的语义去定义。 正如吃方便面的猪说的，记得清除浮动，然后宽度 高度一般都定死，因为效果图出来了最好能根据效果图来做。这样切出来的页面才不会走型。