效果展示

相信只要熟悉前端的朋友都知道，這是一個非常常規(guī)的的前端模塊。然而我交給我的一個網(wǎng)上認(rèn)識的童鞋在寫這個東西，讓他當(dāng)做練練手，結(jié)果就出問題了。主要有兩個問題，第一就是img下的造成整體高了5px；第二就是下面絕對定位的，的尺寸不能與整體統(tǒng)一。如下圖的兩個箭頭之處。

每一個圖片的HTML代碼如下：

下面是CSS代碼

關(guān)于定義<a>的尺寸

其 實看到這里大家已經(jīng)很清楚了，比如下面的.indexad li span a 中明明已經(jīng)定義了width:230px;這跟img的寬度是一致的，那么為什么就是文字短了一截呢？那是因為這個寬度的約束根本就沒有效果，如果我文字 多一點或者少一點，這個寬度會變。其實只需要在這個<a>的CSS中加入一句display: block;即可。

關(guān)于img多出5px高度

其 實看那個圖就已經(jīng)知道了，因為我是在瀏覽器的調(diào)試狀態(tài)下截圖的，大家可以看到會標(biāo)注出有個17px的高度，而默認(rèn)的文字是12px，因此多余的就是 5px。而且在圖片上的<a>我們是沒有文字的，因此這里可以直接定義這個<a>的文字大小為0；有就是加上indexad li ?a{font-size:0;}。同樣地我們還可以定義<a>的高度為0，根據(jù)上面定義<a>的方法就是加上indexad li a{height:0;display:block;}。

就經(jīng)過上面兩個簡單的處理就可以修復(fù)這兩個問題，從而實現(xiàn)開始我們需要的那種效果。