您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“CSS怎么實現(xiàn)網(wǎng)頁圖片底部留出空白”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“CSS怎么實現(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)容到剪貼板
<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>
相應的 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; }
到此,相信大家對“CSS怎么實現(xiàn)網(wǎng)頁圖片底部留出空白”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關內(nèi)容可以進入相關頻道進行查詢,關注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。