![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
《CSS禅意花园》
《CSS权威指南》
《CSS网站布局实录》
《别具光芒》——CSS属性、浏览器兼容与网页布局
《CSS商业网站布局之道》
《CSS与HTML Web设计实践指南》
《CSS Web设计高级教程（第2版）》
《CSS设计彻底研究(部分彩印)》
《HTML+CSS网页设计与布局从入门到精通》
《CSS基础教程》
《CSS网页布局学习笔记》
《css入门经典》
《CSS完全自学手册》
这些都是比较经典书籍
希望能帮助到你
div和CSS最好多学习方式就是多练习，在练习中掌握经验、技巧，很多很多的知识，需要自己实践后体会，书里是不会讲到的。然后你说的兼容问题，不止你老火，所有做网页的，刚开始，都被这个折磨过。（祈祷ie8以下的ie浏览器全部绝迹）熟练掌握运用下面说的方法，就OK了。
解决兼容问题靠经验积累，靠CSS hack！你去百度搜索下CSS hack，百度百科介绍的很详细。
CSS hack简单讲，就是针对不同浏览器写不同css，比如说ie6的hack，意思就是这段css写法，只有在ie6会执行，其他浏览不会执行，这样就能针对不同浏览器写不同的css，达到兼容。
附上一些CSS hack给你参考
#test{
color:red/* 所有浏览器都支持 */
color:red !important/* Firefox、IE7支持 */
_color:red/* IE6支持 */
*color:red/* IE6、IE7支持 */
*+color:red/* IE7支持 */
color:red\9/* IE6、IE7、IE8支持 */
color:red\0/* IE8支持 */
}
body:nth-of-type(1) p{color:red} /* Chrome、Safari支持 */
*+html .list1 li{line-height:18px} //IE7hack
/* Firefox 1 - 2 */
body:empty #firefox12
{display: block}
/* Firefox */
@-moz-document url-prefix()
{#firefox { display: block}}
/* Webkit-Safari-Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0){
color:red
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body #opera { display: block}}
