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

css 代码

.btop{
   width:900px;
   height:10px;
   background:url(images/napic/top.jpg) no-repeat top left;

}
.bbottom{
  width:900px;
  height:10px;
  background:url(images/napic/bottombottom.jpg) no-repeat bottom left;

}
.bcontent{
  margin:0;
  width:880px;
  padding:0 10px;
  background:url(images/napic/contentbg.jpg) repeat-y top left;
}

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

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

css 代码

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