IE6、IE7下,li會出現縫隙的淺析 |
發布時間: 2012/7/20 17:00:45 |
IE6、IE7下,li會出現縫隙的淺析,那么出現縫隙怎么辦呢?今天,在群里無意間看到一個朋友,提到了一個問題! 電腦技巧www.boydavid.com 話說,在IE6、IE7下豎排會導致一個bug,就是每個li之間都有個縫隙?個人對這句話,表示很大的質疑,首先, 電腦知識www.boydavid.com 不說別的,默認什么情況,什么樣式都不加,li豎排吧,IE6、7下會有問題么??答案:不會! 電腦軟件www.boydavid.com 所以首先,我們先要搞清楚,這個問題是怎樣引發的?什么情況下引發的? 電腦入門www.boydavid.com 答:li里面的內容有浮動,但是li本身并沒有浮動,就會造成上述的問題! 電腦維護www.boydavid.com 解決:給li加個verticle-align屬性即可,具體的值,是top、middle、bottom無所謂!這樣問題就迎人而解了,
但是具體為什么呢?為什么會在IE6、7下產生為題呢?我們只能把責任推給他們的開發商了,可能是當時,開發
IE6、7瀏覽器的時候,遺留下來的問題吧! 計算機學習網站www.boydavid.com 上個例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 電腦常識www.boydavid.com <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 計算機愛好者www.boydavid.com <title>無標題文檔</title>
<style>
li{ line-height:30px; background:red; width:300px; verticle-align:middle;}//此處verticle-align是解決問題的關鍵! 電腦技術www.boydavid.com li a{ float:left;}
</style>
</head>
<body> 電腦軟件www.boydavid.com <ul> 電腦硬件www.boydavid.com <ul> 電腦硬件www.boydavid.com <li><a href="javascript:;">asdfasdfasdfasdf</a></li>
<li><a href="javascript:;">avcvxcvxcvxc</a></li>
<li><a href="javascript:;">456645t45545</a></li>
</ul> 本文出自:億恩科技【www.vbseamall.com】 |