<html>
<head>
<meta charset="UTF-8">
<title>Demo</title> <style type="text/css">
#box { font-size: 4vw}</style></head><body> <div id="box">
我是靖鸣君 我是靖鸣君 我是靖鸣君</div></body></html>
但是该方案存在一个bug，上面的代码，当浏览器窗口变化的时候，box中的文字并没有按照应有的比例变化，但是css3标准中是这么说的：
When the height or width of the viewport is changed, they are scaled accordingly.
width:192pxheight:55pxmargin-top:100pxbackground:url(images/anniu01.gif) no-repeat left bottom要将上面的改成
width:192pxheight:155pxbackground:url(images/anniu01.gif) no-repeat left 50px
2.尽量用padding-top:，少用margin-top
今天总算升级到IE8了，感觉CSS的写法要想同时适应IE6、IE7、IE8、FireFox，有以下几个基本的窍门。
1、使用float后必须clear，否则IE8显示错误。
2、h1,h2,h3,ul,li,dl,dt,dd,p...最好定义margin:0和padding:0，否则各种浏览器显示有误差。
3、line-height值最好是偶数，奇数显示有误差。
4、input 的text和password两种形式在IE8不定义字体（宋体）下长度高度不一样，可将input定义为font-family:Arial。
5、如果想在标题前后加小图标，最好不要直接用img，用img的话IE6行间距会缩小，应该用<li>加背景的形式。
...今天暂时只发现这几点，更多的以后继续总结。
实在不行再用分开定义的办法：
div {
margin:0/* 给全部浏览器看 */
*margin:10px/* 给IE6、IE7看 */
_margin:20px/* 只给IE6看 */
}
附：基本CSS样式表
<style type="text/css">
body {
margin:0
font-size:9pt
line-height:18px
}
h1,h2,h3,ul,li,dl,dt,dd,p {
margin:0
padding:0
}
ul {
list-style:none
}
form {
margin:0
}
input,textarea,select {
font-family:Arial
font-size:9pt
}
.clear {
clear:both
}
</style>
IE8现在还没有很好的解决兼容性的办法，但是IE8有一个方式是可以降低到IE7版本浏览。就是在每个以完成的页面源码中添加这句话：<metahttp-equiv="X-UA-Compatible"
content="IE=7"
/>
这样，我们做好的成品页面即使在IE8中测试不兼容，加上上面那段代码，就可以把IE8的兼容性视图降低至IE7，一切就正常啦！以下是css兼容IE6、IE7和FF的方法：
区分IE6，IE7，firefox
区别不同浏览器，CSS
hack写法：
区别IE6与FF：
background:orange*background:blue
区别IE6与IE7：
background:green
!importantbackground:blue
区别IE7与FF：
background:orange
*background:green
区别FF，IE7，IE6：
background:orange*background:green_background:blue
background:orange*background:green
!important*background:blue
注：IE都能识别*标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别
!important,
IE7能识别*，也能识别!important
FF不能识别*，但能识别!important
