2007-07-03

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

关键字: font-size:1px;

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.     }  
评论
发表评论

您还没有登录，请登录后发表评论

tiger.passion
搜索本博客
我的相册
636a5d3f-1fce-3bb9-89d8-b13e5c6318d4-thumb
w3c01
共 46 张
存档
最新评论