亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS針對(duì)IE6實(shí)現(xiàn)網(wǎng)頁(yè)圖片底部留出空白的方法

Kayo   發(fā)布時(shí)間：2016-05-13 12:04:12   作者：Kayo Lee   我要評(píng)論
又到了對(duì)付IE6兼容的時(shí)間了,要讓img底部留出空白,普通的li寫(xiě)法在IE6下往往會(huì)出問(wèn)題, 下面就關(guān)于CSS針對(duì)IE6實(shí)現(xiàn)網(wǎng)頁(yè)圖片底部留出空白的方法給出一些經(jīng)驗(yàn),需要的朋友可以參考下

昨天在優(yōu)化主題時(shí)意外的發(fā)現(xiàn)了 IE6 下 img 標(biāo)簽的一個(gè) Bug ，用塊級(jí)容器包裹 img 標(biāo)簽時(shí)，在 IE6 下 img 標(biāo)簽所在容器底部會(huì)出現(xiàn) 5px 多余的空白，例如網(wǎng)頁(yè)中有如下的結(jié)構(gòu)：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <ul>  
  2.     <li><img src="img-bug.png" alt="img bug" /></li>  
  3.     <li><img src="img-bug.png" alt="img bug" /></li>  
  4.     <li><img src="img-bug.png" alt="img bug" /></li>  
  5.     <li><img src="img-bug.png" alt="img bug" /></li>  
  6.     <li><img src="img-bug.png" alt="img bug" /></li>  
  7. </ul>  

相應(yīng)的 CSS：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. ul {list-style: none; }   
  2. li {display: block; width: 200px; height: 40px; }  

在 Chrome 下，會(huì)顯示如下的正確結(jié)果：
PPPPPPPPPPPPPPP1
但在杯具的 IE6 下，會(huì)顯示如下的情況：
PPPPPPPPPPPPPPPPP2
接下來(lái)是如何解決問(wèn)題了，解決的方案有很多種，這里 Kayo 列舉幾個(gè)比較好的解決方法：

方法一
方法一也是最常用的方法了，就是為 img 標(biāo)簽的父元素添加 overflow: hidden 。
li {overflow: hidden; }
這個(gè)方法比較簡(jiǎn)單，只是父元素必須有指定的 height ，并且需要注意，某些情況下父元素可能需要顯示超出自身大小的子元素（如顯示絕對(duì)定位的超出父元素大小的子元素），這時(shí)使用 overflow: hidden 就不那么合適了。

方法二
為 img 標(biāo)簽設(shè)置 margin-bottom: -5px
img {margin-bottom: -5px; }

方法三
為 img 標(biāo)簽設(shè)置 vertical-align: bottom
img {vertical-align: bottom; }

相關(guān)文章

最新評(píng)論