Welcome! 登入 註冊
美寶首頁 美寶百科 美寶論壇 美寶落格 美寶地圖

Advanced

表單屬性list-style-image的跨瀏覽器案例解析:將清單項目的開頭符號設為圖像時,其垂直位置會偏離

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