欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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寫法在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)文章

  • 針對(duì)IE6的一些CSS Hack編寫時(shí)的注意點(diǎn)小結(jié)

    首先幫大家區(qū)分一些針對(duì)IE6的hack寫法,看到以后就知道要對(duì)付萬(wàn)惡的IE6了--然后來(lái)整理針對(duì)IE6的一些CSS Hack編寫時(shí)的注意點(diǎn)小結(jié),需要的朋友可以參考下
    2016-05-26

  • 淺談前端制作中，IE6還有必要兼容嗎

    下面小編就為大家?guī)?lái)一篇淺談前端制作中，IE6還有必要兼容嗎？小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-05-31

最新評(píng)論