Идентификация изображения "list-style-image" в Opera через CSS

Question

Опера имеет недопустимую визуализацию позиционирования изображения элементов списка. Посмотрите демонстрационную страницу с Opera и другим браузером.

Тип:

/* 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. добавьте line-height (в em) к li (вам нужно будет попробовать разные значения, чтобы найти правильное)
2. теперь маркеры отцентрированы, но буквы перекрывают друг друга
3. добавить padding:X 0; в li, где 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, используйте этот хак )

Answer 2

Второе предложение Кну. Использование li{ line-height:.95em; padding-bottom:10px; } дало довольно стабильные результаты в моих тестах, хотя вы, возможно, захотите немного скорректировать эти значения.

Я также предлагаю заменить «none» другим значением типа list-style, чтобы предотвратить проблему отображения в Opera 11. Пока изображение доступно на сервере, диск не должен появляться.

Answer 3

Я не знаком с конкретной проблемой, которую вы описываете, и я не знаю, есть ли какое-то конкретное исправление для нее, но один обходной путь использует background-image / background-position, который легче настроить:

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

(Вам понадобится определенное количество padding-left, чтобы освободить место для пули)