1. 表單風格(list-style)
list-style-image (12.6.2)
1. 將清單項目的開頭符號設為圖像時,其垂直位置會偏離
相異瀏覽器:FF、IE6、IE7、OP
問題描述:
使用list-style-image 屬性,可以設定圖像作為清單項目符號,但在大部份的瀏覽器,不僅會造成文字的垂直位置大幅偏離,更糟的是沒辦法調整該位置,因此目前鮮少使用list-style-image屬性,而是採用li元素的背景圖像來代替。
解決方法:
1)不使用list-style-image屬性,而是將清單的符號設為不顯示,並改用背景圖像來顯示符號的程式碼,利用background-position屬性來調整細部的顯示位置更方便,基本上,只要利用list-style等屬性將清單原本的符號消除,並保留li元素左側用來顯示圖像的padding區域,然後在該處顯示背景圖像即可。例如:
HTML程式碼:
<ul>
<li> 清單項目1</li>
<li> 清單項目2</li>
<li> 清單項目3</li>
<li> 清單項目4</li>
</ul>
CSS程式碼
ul{list-style:none;margin:0;padding:0;line-hiegh:1.5;}
li{margin:0;padding:0 0 0 15px;background:url(marker.gif) 0 0.35em no-repead;}
參考文章:
XHTML+CSS虎之卷,旗標出版社,大藤幹著,p.180-181