小区域图形背景整合时出现的间隙问题

css 代码

1. .btop{ 
2.    width:900px; 
3.    height:10px;
   
4.    background:url(images/napic/top.jpg) no-repeat top left;
5.    
6. }  
7. .bbottom{ 
8.   width:900px;
   
9.   height:10px;
   
10.   background:url(images/napic/bottombottom.jpg) no-repeat bottom left;
11.   
12. }  
13. .bcontent{
    
14.   margin:0;
15.   width:880px;
    
16.   padding:0 10px;
    
17.   background:url(images/napic/contentbg.jpg) repeat-y top left;
18. }  

以上代码便是在组合一个圆角边框的背景时所涉及的css样式，在firefox下显示正常，但在IE下显示出现问题， 顶部、底部和中间均出现了大概5px宽的间隙。
仔细研究过后发觉问题可能出现在line-height上，补上后不见好转，：（    之后又联想到font-size，分别在btop、bbottom加上 font-size：1px; 这样一条属性值，问题解决。：）

核心原因： 在body选择符中定义了font-size：14px;而btop、bbottom这两个类选择符中只定义了height:10px;   所以在IE下出现了破格 4px的现象。

css 代码

1. body{  
2.     background:#b30d0e  url(images/napic/bg.jpg) repeat-x top left;  
3.     color:#646464;  
4.     font-family: "宋体";  
5.     font-size:14px;  
6.     line-height:18px;  
7.     padding:20px;  
8.     }