在IE8中嵌入在TD中的表中垂直對齊圖像

Question

在IE8中存在問題，垂直對齊時圖像無法在TD中嵌入表時工作。這在所有的瀏覽器工作正常...

   <table cellpadding="1" cellspacing="1"> 
       <tr> 
        <td><div style="border: #999999 1px Solid; background-color: #D0D7E0; color:black; vertical-align:middle">&nbsp;<img src="images/calendar/redflag.gif" border="none" style="vertical-align:middle" alt="Scheduling" /><span style="">&nbsp;Scheduling&nbsp;Rule&nbsp;</span></div></td> 
        <td><div style="border: #999999 1px Solid; background-color: #E0DFD0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_conference.gif" border="none" style="vertical-align:middle;" alt="Conference" /><span style="">Conference&nbsp;</span></div></td> 
        <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_exercise.gif" border="none" style="vertical-align:middle" alt="Exercise" /><span style="">Exercise&nbsp;</span></div></td> 
        <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_training.gif" border="none" style="vertical-align:middle" alt="Training" /><span style="">Training&nbsp;Event&nbsp;</span></div></td> 
        <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_other.gif" border="none" style="vertical-align:middle" alt="Other" /><span style="">Other&nbsp;Event&nbsp;</span></div></td> 
       </tr> 
      </table> 

但是，如果我把一個表中的TD然後將文本旁邊的圖像獲取IE 8渲染圖像下方，而不是在它旁邊的...

<table border="0" cellpadding="2" cellspacing="0" width="100%"> 
    <tr> 
     <td id="td1" width="5%">&nbsp;</td> 
     <td id="td2" align="center" width="30%">  
      <table cellpadding="1" cellspacing="1"> 
       <tr> 
        <td><div style="border: #999999 1px Solid; background-color: #D0D7E0; color:black; vertical-align:middle">&nbsp;<img src="images/calendar/redflag.gif" border="none" style="vertical-align:middle" alt="Scheduling" /><span style="">&nbsp;Scheduling&nbsp;Rule&nbsp;</span></div></td> 
        <td><div style="border: #999999 1px Solid; background-color: #E0DFD0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_conference.gif" border="none" style="vertical-align:middle;" alt="Conference" /><span style="">Conference&nbsp;</span></div></td> 
        <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_exercise.gif" border="none" style="vertical-align:middle" alt="Exercise" /><span style="">Exercise&nbsp;</span></div></td> 
        <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_training.gif" border="none" style="vertical-align:middle" alt="Training" /><span style="">Training&nbsp;Event&nbsp;</span></div></td> 
        <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_other.gif" border="none" style="vertical-align:middle" alt="Other" /><span style="">Other&nbsp;Event&nbsp;</span></div></td> 
       </tr> 
      </table>  
     </td> 
     <td id="td3" align="center" width="30%">&nbsp;</td> 
     <td id="td4" width="30%">&nbsp;</td> 
     <td id="td5" width="5%">&nbsp;</td> 
    </tr> 
</table> 

適用於所有其他瀏覽器，包括IE7。任何想法如何在IE8中解決這個問題？

Answer 1

添加white-space: nowrap;到嵌套表

<table border="0" cellpadding="2" cellspacing="0" width="70%"> 
    <tr> 
     <td id="td1" width="5%">&nbsp;</td> 
     <td id="td2" align="center" width="30%">  
      <table cellpadding="1" cellspacing="1" style="white-space: nowrap">