日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

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

昨天在優(yōu)化主題時意外的發(fā)現(xiàn)了 IE6 下 img 標簽的一個 Bug ,用塊級容器包裹 img 標簽時,在 IE6 下 img 標簽所在容器底部會出現(xiàn) 5px 多余的空白,例如網(wǎng)頁中有如下的結構:

XML/HTML Code復制內(nèi)容到剪貼板ulliimgsrc=https://www.rkxy.com.cn/dnjc/img-bug.pngalt=imgbug//liliimgsrc=img-bug.pngalt=imgbug//liliimgsrc=img-bug.pngalt=imgbug//liliimgsrc=img-bug.pngalt=imgbug//liliimgsrc=img-bug.pngalt=imgbug//li/ul【CSS針對IE6實現(xiàn)網(wǎng)頁圖片底部留出空白的方法】相應的 CSS:

CSS Code復制內(nèi)容到剪貼板ul{list-style:none;}li{display:block;width:200px;height:40px;}在 Chrome 下,會顯示如下的正確結果:
PPPPPPPPPPPPPPP1
但在杯具的 IE6 下,會顯示如下的情況:
PPPPPPPPPPPPPPPPP2
接下來是如何解決問題了,解決的方案有很多種,這里 Kayo 列舉幾個比較好的解決方法:
方法一
方法一也是最常用的方法了,就是為 img 標簽的父元素添加 overflow: hidden。
li {overflow: hidden; }
這個方法比較簡單,只是父元素必須有指定的 height ,并且需要注意,某些情況下父元素可能需要顯示超出自身大小的子元素(如顯示絕對定位的超出父元素大小的子元素),這時使用 overflow: hidden 就不那么合適了 。
方法二
為 img 標簽設置 margin-bottom: -5px
img {margin-bottom: -5px; }
方法三
為 img 標簽設置 vertical-align: bottom
img {vertical-align: bottom; }

    推薦閱讀