CSS針對IE6實現(xiàn)網(wǎng)頁圖片底部留出空白的方法
Kayo 發(fā)布時間：2016-05-13 12:04:12 作者：Kayo Lee 
我要評論
我要評論又到了對付IE6兼容的時間了,要讓img底部留出空白,普通的li寫法在IE6下往往會出問題, 下面就關(guān)于CSS針對IE6實現(xiàn)網(wǎng)頁圖片底部留出空白的方法給出一些經(jīng)驗,需要的朋友可以參考下
昨天在優(yōu)化主題時意外的發(fā)現(xiàn)了 IE6 下 img 標簽的一個 Bug ，用塊級容器包裹 img 標簽時，在 IE6 下 img 標簽所在容器底部會出現(xiàn) 5px 多余的空白，例如網(wǎng)頁中有如下的結(jié)構(gòu)：
XML/HTML Code復制內(nèi)容到剪貼板
- <ul>
- <li><img src="img-bug.png" alt="img bug" /></li>
- <li><img src="img-bug.png" alt="img bug" /></li>
- <li><img src="img-bug.png" alt="img bug" /></li>
- <li><img src="img-bug.png" alt="img bug" /></li>
- <li><img src="img-bug.png" alt="img bug" /></li>
- </ul>
相應(yīng)的 CSS：
CSS Code復制內(nèi)容到剪貼板
- ul {list-style: none; }
- li {display: block; width: 200px; height: 40px; }
在 Chrome 下，會顯示如下的正確結(jié)果：
PPPPPPPPPPPPPPP1
但在杯具的 IE6 下，會顯示如下的情況：
PPPPPPPPPPPPPPPPP2
接下來是如何解決問題了，解決的方案有很多種，這里 Kayo 列舉幾個比較好的解決方法：
方法一
方法一也是最常用的方法了，就是為 img 標簽的父元素添加 overflow: hidden 。
li {overflow: hidden; }
這個方法比較簡單，只是父元素必須有指定的 height ，并且需要注意，某些情況下父元素可能需要顯示超出自身大小的子元素（如顯示絕對定位的超出父元素大小的子元素），這時使用 overflow: hidden 就不那么合適了。
方法二
為 img 標簽設(shè)置 margin-bottom: -5px
img {margin-bottom: -5px; }
方法三
為 img 標簽設(shè)置 vertical-align: bottom
img {vertical-align: bottom; }
相關(guān)文章
針對IE6的一些CSS Hack編寫時的注意點小結(jié)
首先幫大家區(qū)分一些針對IE6的hack寫法,看到以后就知道要對付萬惡的IE6了--然后來整理針對IE6的一些CSS Hack編寫時的注意點小結(jié),需要的朋友可以參考下2016-05-26- 下面小編就為大家?guī)硪黄獪\談前端制作中，IE6還有必要兼容嗎？小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-31