中心<img /> + <a /> inside table and overflow auto in IE7

Question

I am having a problem centering an image and a inside a table. At the moment I have set display: inline-block which works on in everything apart from IE7.

Also I have set a parent <div /> with overflow-y: auto, the problem with this is that in IE7 the table is behind the scroll bar, where as in FF the scroll bar is at the side of the table. Is there any way to get around this problem?

This is a simplified version:

Answer 1

參見：http://jsfiddle.net/D52Uv/10/

要解決該問題，滾動條，也許是最簡單的 「修復」 爲*padding-right: 20px，這將只是IE6/7適用。將20px調整爲任何看起來最好的。

要解決的圖像：

.image { 
    background: none repeat scroll 0 0 #E7E7E7; 
    border: 1px solid #C7C7BB; 

    display: inline-block; 
    *display: inline; 
    zoom: 1; 

    margin: 4px 2px 0 0; 
    padding: 4px; 
    text-align: center; 
} 
.image img { 
    vertical-align: top; 
} 

More info here.