桌面邊緣的CSS圓角文檔模式中的問題IE7標準

我得到了一個關於CSS背景圖像的簡單問題。我的意圖是使用圖像來顯示桌子邊緣的圓角（不使用border-radius屬性）。桌面邊緣的CSS圓角文檔模式中的問題IE7標準

<style type="text/css"> 
    .top 
    { 
     background-repeat:repeat; 
     vertical-align:top; 
    } 

    .left 
    { 
     text-align:left; 
    } 

    .middle 
    { 
    } 

    .right 
    { 
     text-align:right; 
    } 

    .bottomLeft 
    { 
     vertical-align:bottom; 
    } 

    .bottom 
    { 
     background-repeat:repeat; 
     vertical-align:bottom; 
    } 

    .bottomRight 
    { 
     vertical-align:bottom; 
    } 
</style> 

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td class="topLeft"> 
      <img height="16px" src="Images/greenTL.gif" style="vertical-align:bottom" /> 
     </td> 
     <td class="top"> 
      <img height="4px" width="100%" src="Images/greenT.gif" style="vertical-align:8px" /> 
     </td> 
     <td class="topRight"> 
      <img height="16px" src="Images/greenTR.gif" style="vertical-align:bottom" /> 
     </td> 
    </tr> 
    <tr> 
     <td class="left"> 
      <img height="100%" src="Images/greenL.gif"/> 
     </td> 
     <td class="middle"> 
     </td> 
     <td class="right"> 
      <img height="100%" src="Images/greenR.gif"/> 
     </td> 
    </tr> 
    <tr> 
     <td class="bottomLeft"> 
      <img height="16px" src="Images/greenBL.gif" style="vertical-align:top" /> 
     </td> 
     <td class="bottom" > 
      <img height="4px" width="100%" src="Images/greenB.gif" /> 
     </td> 
     <td class="bottomRight"> 
      <img height="16px" width="16px" src="Images/greenBR.gif" style="vertical-align:top"/> 
     </td> 
    </tr> 
</table>

的HTML & CSS以上至9工作在IE中完全沒有從瀏覽器模式7，但改變文檔模式到IE 7標準當它成爲失真。這似乎是左右垂直間隙。

enter image description here