CSS 垂直对齐 IE 6 & 7 问题

Question

您好，我有以下代码:

...
                    <li><a href="">
                        <span class="nr">2</span>
                        <span class="item">Despre clinic&atilde;</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
                    <li><a href="">
                        <span class="nr">3</span>
                        <span class="item">Servicii</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
                    <li><a href="">
                        <span class="nr">4</span>
                        <span class="item">Echipa medical&atilde;</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
...

和CSS:

#footer .navi { margin: 0; padding: 0; list-style: none; }
#footer .navi li { width: 207px; height: 85px; background: url(../images/footer_navi.gif) 0 0 no-repeat; float: left; vertical-align: middle; display: table-row; }
#footer .navi a { width: 207px; height: 85px; color: #CC0000; text-decoration: none; }
#footer .navi span.img { height: 85px; vertical-align: middle; display: table-cell; }
#footer .navi span.item { height: 85px; padding: 0 5px; width: 83px; font-size: 16px; vertical-align: middle; display: table-cell; }
#footer .navi span.nr { height: 85px; padding: 0 9px; width: 9px; font-size: 20px; color: #FF9999; vertical-align: middle; display: table-cell; }

如您所见，我为 .item 设置了宽度，因此我的文本会换行。由于 IE 不支持表格单元格和表格行，我已经为我的跨度完成了 * html #footer .navi li {display: block;} 和 inline-block。

现在我有两个问题:

1. 除非我为 IE6 和 7 设置最大宽度，否则我的文本不会换行
2. 尽管使用了 star hack IE6&7 仍然无法很好地呈现

有什么想法吗？谢谢

Answer 1

使用 tableless css 做的最难的事情之一。

我的代码最初是针对带有 div 元素的 img 元素，但也应该像这样工作。

为解释添加了层次结构。

li {
    width:207px;
    height:85px;
    float:left;
    text-align:center;
    display:table;
    overflow:hidden;
    #position:relative;
    #z-index:1;
}
li a {
     #display:block;
     #position: relative;
     #top: -50%;
     #left: -50%;
     display:table-cell;
     vertical-align:middle;
     margin:0 auto;
}
li a span {
    #display:block;
    #position: absolute;
    #top: 50%;
    #left: 50%;
    display:table-cell;
    vertical-align:middle;
    margin:0 auto;
}