li標籤中list-style-image在IE和firefox下定位不同不對齊

li標籤中list-style-image在IE和firefox下定位不同不對齊

list-style-image以前也多次嘗試到用過，但是由於在各個瀏覽器下到表現不一致，尤其是對齊的問題。

今天逐個調試，還是有些收穫的。

首先，看最簡單，最原始的，從中我們可以發現一些問題——

代碼：

<title>list與背景圖片到定位</title>
<style type="text/css">
ul{list-style:none; padding:0; margin:0; margin-left:50px;}
ul li{list-style-image:url(../image/li_point.gif); font-size:12px; list-style-position:outside; }
</style>
</head>

<body>
<ul>
<li>我是一個蘋果</li>
<li>我是一個荔枝</li>
<li>我是一個西瓜</li>
<li>我是一個葡萄</li>
<li>我是一個桃子</li>
</ul>
</body>

其中url(../image/li_point.gif); 是個3px*3px的黑色點圖片。

這段代碼的在各個瀏覽器下的表現如下：

仔細觀察可以發現：在IE6和IE7下，“點”背景圖片位置相對偏上一點，而firefox和chrome下相對偏下。

這就是標題所說的不對齊的問題，該如何解決呢，不急，一步一步來。

css部分修改代碼為如下：

<style type="text/css">
ul{list-style:none; padding:0; margin:0; margin-left:50px;}
ul li{list-style-image:url(../image/li_point.gif); font-size:12px; list-style-position:outside; height:16px;}
</style>

設定了一個高度height：16px（這裡的高度因字型而異，如果字型為Arial，高度相應增加，針對英文而言），結果在各個瀏覽器下表現如下 （由於IE6與IE7表現一致，firefox與chrome表現一致，所以這裡僅展示在I6和在firefoxFirefox下的表現）：

仔細觀察會發現IE6下黑色的點的位置相對於文字下移了，現在基本上與文字的垂直中線對齊了，但是firefox下點和文字的相對位置沒有改變。我的理解是這樣的，IE下 li的背景和文字是兩個分離的量，至少對於位置關係而言，list-style-image下的背景圖片位置（我個人感覺）是起始於li高度偏上40% 的位置。當li高度增加後，list-style-image下的背景圖片（這裡指黑點）相對於li標籤上邊沿的實際距離是會隨著li高度的增加而增加 的，但是li內的文字預設居頂對齊的，其垂直位置起始於li高度偏上0% 的位置，無論li多高，其相對於li標籤上邊沿的距離都是不變的，所以，一定存在一個合適的li高度，讓背景圖片與文字正好中線對齊，這就需要你自己設定 調試了。而對於firefox（包括chrome），list-style-image下的背景圖片位置與文字似乎整個整體，兩者的相對文字是固定不變的，無論你設定li高度，padding，還是line-height都沒有變化，點還是位於文字偏下的位置，難道沒有解決的方法嗎？不急。

我們現在換一張li的背景圖試試——一個高度為7px的圖片。為了直觀的顯示其變化，我做了gif動畫如下，上為IE下，下為firefox下：

不知您是否注意到兩張動畫的差異所在，在IE下，7px高度的圖片（橙色小三角）代替原來的3px高度的小黑點時是置中替換，就是兩個圖片垂直中線一致，而firefox下，圖片的替換像是居底替換的，前後圖片底線高度一致。

由此就可以粗略地做一個總結，對於使用list-style-image顯示li背景圖片而言，IE下背景圖片與文字的相對位置只與li的高度相 關，firefox片與文字的高度至於圖片的高度相關。這下可以鬆一口氣了，只要在製作的時候注意背景圖片的高度，控制好li的高度就能夠很好的解決 使用list-style-image顯示li背景圖片與文字對其的問題了。其實上面用7px高度替換3px高度圖片已經算是很好的解決了這一問題了。秀 一下剛剛的靜態圖吧：

如果要求很高，建議使用高度8px或9px的圖片。那會是無懈可擊的圖片文字對齊，且各個瀏覽器安全色。

好，下面列一下list-style-image圖片背景與文字對齊準則一：12px的漢字——16px的li高度——8px高度的背景圖片。

如果是14px的文字呢？則是：14px的漢字——18px的高度——10px高度的背景圖片。已經過國家zxx 9002品質體系認證，絕對適用。

最後得說一點主題以外的話，list-style-image控制對齊確實有些麻煩，如果...if...您不在乎多寫幾句代碼的話，可以試試下面的li背景圖片與文字定位的方法：

<style type="text/css">
ul{list-style:none; padding:0; margin:0; margin-left:50px;}
ul li{background:url(../image/li_point.gif) no-repeat left center; font-size:12px; height:18px; text-indent:16px; line-height:18px; }
</style>

通過背景定位與text-indent首行文字縮排控制控制文字起始位置實現，上面代碼在firefox下效果是忒棒：

但是IE片有些偏下：

 

可以利用css hack調整到完美狀態：

<style type="text/css">
ul{list-style:none; padding:0; margin:0; margin-left:50px;}
ul li{background:url(../image/li_point.gif) no-repeat left center; font-size:12px; height:18px; *height:16px; text-indent:16px; line-height:18px; *padding-top:2px;}
</style>

紅色標示使IE下文字下沉2px從而與前面的黑色點點完美對齊。

如下：

以上兩張方法都有一定的局限性，不過總體而言我還是覺得方法2好一點。