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和在firefox火狐下的表现）：
仔细观察会发现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好一点。
