css - "list-style-image"通过 CSS 在 Opera 中图片缩进

Question

Opera 无法接受列表项的图像元素符号定位呈现。 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 )