DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> li行間距大(IE中多了5個像素)的解決方法
li行間距大(IE中多了5個像素)的解決方法
編輯:前端技巧     

復制代碼代碼如下:
li {width:300px; height:23px; line-height:24px:}
<ul>
<li>行距很大</li>
<li>行距很大</li>
<li>行距很大</li>
<ul>

以上定義後li的行間距應該是23px,但是IE確是28px,多了5個像素,原因不知道,解決方法如下(紅色表示測試OK):
1.解決li在IE5下產生空白行距的方法:如果li定義了寬度,那麼需要在li裡面再定義vertical-align: bottom;。
2.寬度最好不要定義在UL,定義在LI或者UL外層的DIV裡面。
3.書寫LI的最佳方式,li裡面要書寫高度和寬度,以及vertical-align: bottom;(for ie5/win bug),或者在ul外面加上一層div,並定義寬度,那麼在li裡面不用定義寬度和vertical-align: bottom;,也顯示正常(IE5下不會產生空白行距),不過高度還是要定義一下的。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved