如何擺脫絕對定位的內容之下的差距？

Question

我試圖在水平對齊的無序列表中對齊一些大小可變的鏈接圖像。下面的我的HTML + CSS大部分都是這樣做的。只有一個小問題：圖像下方的空隙（http://jsfiddle.net/ymSvr/）。正如你所看到的，我正在使用絕對定位來讓圖像堅守底部。但即使在bottom: 0的形象仍然不完全是。

有人能解釋爲什麼會發生這種情況嗎？我該如何解決這個問題？

標記：

<ul> 
    <li> 
    <div class="outer"> 
     <div class="inner"> 
     <a href="javascrip:void(0)"> 
     <img src="http://lorempixel.com/output/animals-h-c-132-200-5.jpg" /> 
     </a> 
     </div> 
    </div> 
    </li> 
    <li> 
    <div class="outer"> 
     <div class="inner"> 
     <a href="javascrip:void(0)"> 
     <img src="http://lorempixel.com/output/animals-h-c-132-165-4.jpg" /> 
     </a> 
     </div> 
    </div> 
    </li> 
    <li> 
    <div class="outer"> 
     <div class="inner"> 
     <a href="javascrip:void(0)"> 
     <img src="http://lorempixel.com/output/animals-h-c-132-190-9.jpg" /> 
     </a> 
     </div> 
    </div> 
    </li> 
</ul> 

CSS：

ul li { 
    display:inline-block; 

} 

.outer { 
    background-color: #c0c0c0; 
    display: block; 
    height: 242px; 
    position: relative; 
    width: 200px; 
} 

.inner { 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    text-align: center; 
} 

Answer 1

添加以下代碼

img { 
    vertical-align:bottom; 
} 

http://jsfiddle.net/ymSvr/1/