当 TD 中嵌入表格时，IE8 中的图像垂直对齐问题不起作用。这适用于所有浏览器......
<table cellpadding="1" cellspacing="1">
<tr>
<td><div style="border: #999999 1px Solid; background-color: #D0D7E0; color:black; vertical-align:middle"> <img src="images/calendar/redflag.gif" border="none" style="vertical-align:middle" alt="Scheduling" /><span style=""> Scheduling Rule </span></div></td>
<td><div style="border: #999999 1px Solid; background-color: #E0DFD0; color:black; vertical-align:middle"> <img src="images/eventtype_conference.gif" border="none" style="vertical-align:middle;" alt="Conference" /><span style="">Conference </span></div></td>
<td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle"> <img src="images/eventtype_exercise.gif" border="none" style="vertical-align:middle" alt="Exercise" /><span style="">Exercise </span></div></td>
<td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle"> <img src="images/eventtype_training.gif" border="none" style="vertical-align:middle" alt="Training" /><span style="">Training Event </span></div></td>
<td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle"> <img src="images/eventtype_other.gif" border="none" style="vertical-align:middle" alt="Other" /><span style="">Other Event </span></div></td>
</tr>
</table>
但是如果我把它放在表格 td 中，那么图像旁边的文本将呈现在图像下方，而不是在 IE 8 中...
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td id="td1" width="5%"> </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"> <img src="images/calendar/redflag.gif" border="none" style="vertical-align:middle" alt="Scheduling" /><span style=""> Scheduling Rule </span></div></td>
<td><div style="border: #999999 1px Solid; background-color: #E0DFD0; color:black; vertical-align:middle"> <img src="images/eventtype_conference.gif" border="none" style="vertical-align:middle;" alt="Conference" /><span style="">Conference </span></div></td>
<td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle"> <img src="images/eventtype_exercise.gif" border="none" style="vertical-align:middle" alt="Exercise" /><span style="">Exercise </span></div></td>
<td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle"> <img src="images/eventtype_training.gif" border="none" style="vertical-align:middle" alt="Training" /><span style="">Training Event </span></div></td>
<td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle"> <img src="images/eventtype_other.gif" border="none" style="vertical-align:middle" alt="Other" /><span style="">Other Event </span></div></td>
</tr>
</table>
</td>
<td id="td3" align="center" width="30%"> </td>
<td id="td4" width="30%"> </td>
<td id="td5" width="5%"> </td>
</tr>
</table>
在包括 IE7 在内的所有其他浏览器中工作正常。关于如何在 IE8 中解决此问题的任何想法？
最佳答案
添加white-space: nowrap;到嵌套表
<table border="0" cellpadding="2" cellspacing="0" width="70%">
<tr>
<td id="td1" width="5%"> </td>
<td id="td2" align="center" width="30%">
<table cellpadding="1" cellspacing="1" style="white-space: nowrap">
关于css - 在 IE8 的 TD 中嵌入表格中的垂直对齐图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5516025/