可以把 IE 6 給丟了 - 自訂項目清單圖片

HTML 裡的 <ul> 和 <li> 可以用來列舉清單，一般預設的清單項目符號就是一顆圓圓的。



有一天，突然發現可以直接用一行 css 直接換掉這個圓圓的小東西時，好像發現新大陸一樣驚奇，好像有點太後知後覺了。

ul{

  list-style-image:url(ul_image.gif);

}

只是這個好用的 css 屬性，真正放到瀏覽器上看，好像有點歪了，不是好像，是真的歪的，不能裝做沒看到。這次 IE6 是躺著也中槍，算它倒楣，因為其實 Firefox 也歪了，只是沒偏那麼多，也沒那麼擠。



其實有很多種方法可以做到一樣的效果，但如果要列舉性質相同的東西，用最少的 html 當然是首選。不然直接在網頁的 html 裡面硬塞圖片進去也行啊，只是這對程式碼有潔癖的人是絕對不允許的，日後維護起來很傷眼睛。所以，原本我是打算就裝做沒看到的，歪就歪吧，客戶沒叫，我也不想改 XDD

只是又某天，在書店裡翻著一本網頁設計的書，好死不死剛好被書本的作者給了一計當頭棒喝，他說現在已經很少人用 list-style-image 的方法來自訂項目清單圖片，因為會造成像上面那樣傷眼的畫面，「尤其是在 IE」 (這是作者說的，人不是我殺的)。天啊，我竟然用了一個過時還被嫌棄的方法，不行，我一定要改掉…！不然實在愧為資訊界的一員。這天在書店學到了好多撇步，我愛死書店了，可以不要再隨便倒了好嗎？（還不就是你們這些人一直去看免錢的，書店才會倒吧…）

ul{

  list-style:none;

}

li{

  background-image:url(ul_image.gif);

  background-repeat:no-repeat;

  padding-left: 30px;

}

換成上面的寫法，所有大大小小的症頭都消失了，這樣才是跟的上時代的寫法啊！



先把 <ul> 的list-style-image設成none，就不會有預設的圓點點出現。接著用設定 <li> 背景圖片的方式達到自訂項目清單圖片的效果。

由於圖片本身有寬度，還要再設 padding-left 屬性，不然字會直接蓋到圖片上，除非那是你想要的效果…。用 padding-left 的屬性來控制文字和圖片之間的距離，諒 IE6 這位不老妖精也不敢作怪了。

誰說清單前面一定要有個圖，還可以這樣搞，這是從偉大的 WBI-FN 裡面偷學到的。



千萬不要小看它，你可是每天都在這個 <ul> 和 <li> 裡面玩耍。