“vertical-align: middle” on table cells does not align to the middle with AlphaImageLoader in IE6

I'm trying to align some text on table cells with a PNG Transparent background, I uses the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() to fix this in IE6. But the text does not align to the middle with the style filter:

CSS:

.fh {
font-family:SimSun;
font-size:12px;
overflow:hidden;
padding:0 2px 2px;
text-align:left;
vertical-align:middle;
}

HTML:

<table width="200"  border="1" cellpadding="2" class="x-table">
<tr>
<th scope="col">&nbsp;</th>
</tr>
<tr style="height: 77px;">
<td class="fh" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./shadow-trans.png')">&nbsp;ABCDEFG</td>
</tr>
</table>

Screenshot:

"vertical_align_ie6" http://filer.blogbus.com/4216262/resource_42开发者_Go百科16262_1279530625v.png

Try shifting the height to the TD or the TABLE.

I find that this problem can be fixed by insert a div with a table in it to the origin td:

HTML:

<table cellspacing="0" cellpadding="0" class="x-table" style="position: absolute; width: 289px; left: 0px;">
    <colgroup>
        <col style="width: 72px;"/>
        <col style="width: 72px;"/>
        <col style="width: 72px;"/>
        <col style="width: 72px;"/>
    </colgroup>
    <tbody>
        <tr style="height: 77px;">
            <td class="brw1 brss bbw1 bbss blw1 blss btw1 btss" style="border-color: rgb(153, 204, 255); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./shadow-trans.png', sizingMethod=crop);background-repeat: no-repeat;" id="A1-0" colspan="4">
                <div class="fx" style="height: 76px;">
                    <table>
                        <tbody>
                            <tr>
                                <td class="fh bw" style="height: 76px; width: 288px;">ABCDEFG</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>