Opera中的“list-style-image”图片缩进

Question

Opera对列表项的image-bullet定位进行了无法接受的渲染。 Look at demo page with Opera and different browser.

样式：

/* body {line-height:150%;} */
ul {list-style: none outside url('img/bullet-lilac.gif');

HTML示例：

<ul>
    <li><a href="">Ut enim ad minim veniam</a></li>
    <li>Sample item</li>
</ul>

Opera中的项目符号缩进到该行的顶部。这太糟糕了。某种黑客有什么解决办法吗？

对background-image技巧不感兴趣。

截图即可。背景为Opera，前景为Chrome

Answer 1

1. 在li上添加line-height（在em中）（您必须尝试使用​​不同的值才能找到正确的值）
2. 现在子弹居中但是lis相互重叠
3. 在li上添加padding:X 0;，其中X是em
中的值

在你的情况下，这是经过推荐的css：

ul {list-style: none outside url('http://rayz.ru/misc/askdev/list-style-image/pic1.gif')}  
li {line-height:0.8em;padding:0.3em 0}

您定位的是哪个Opera版本？ （如果OP11使用this hack）

Answer 2

我不熟悉您描述的特定问题，我不知道是否有针对它的具体修复，但有一种解决方法是使用background-image / background-position这更容易微调：

li { 
     background-image:url(img/bullet-lilac.gif); 
     background-position: left center;
   }

（你需要一定数量的padding-left来为子弹腾出空间）

Answer 3

借调克努的建议。在我的测试中使用li{ line-height:.95em; padding-bottom:10px; }提供了相当一致的结果，但您可能希望稍微调整这些值。

我还建议将“none”替换为另一个list-style-type值，以防止Opera 11中出现显示问题。只要服务器上的图像可用，就不应出现光盘。