关于解决列表项标记的图像的兼容性问题

实例

ul{

  list-style-image: url('help1.png');

 }

上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。

如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

例子解释：

• ul:
  • 设置列表样式类型为没有删除列表项标记
  • 设置填充和边距0px（浏览器兼容性）
• ul中所有li:
  • 设置图像的URL，并设置它只显示一次（无重复）
  • 您需要的定位图像位置（左0px和上下5px）
  • 用padding-left属性把文本置于列表中