идентификация изображения в стиле списка в Opera через CSS

Opera имеет неприемлемую визуализацию позиционирования элементов списка. Посмотрите демо-страницу с 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 на переднем плане

Список в разных браузерах


css html-lists opera
person Andrew Rumm    schedule 10.10.2010    source источник
comment
Я не могу воспроизвести ошибку, которую вы пытаетесь устранить в Opera 10.61 для Linux. Можете ли вы опубликовать скриншот или что-то в этом роде?   -  person Yi Jiang    schedule 11.10.2010
comment
Обновленный вопрос со скриншотом.   -  person Andrew Rumm    schedule 13.10.2010
comment
подтвердил поведение в последней версии Opera (11.0)   -  person karlcow    schedule 24.01.2011

Ответы (3)


arrow_upward
3
arrow_downward

  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, используйте этот хак)

person Knu    schedule 24.01.2011
comment
Ваше предложение выглядит круто для не многострочных элементов списка. Итак, мне нужно добавить в него больше контейнеров, чтобы он выглядел как в других браузерах. - person Andrew Rumm; 27.01.2011

arrow_upward
0
arrow_downward

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

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

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

person Pekka    schedule 10.10.2010
comment
Я знаю об этом решении. Но меня интересует другое. С list-type-image - person Andrew Rumm; 11.10.2010
comment
возможно, RayZ нужно использовать фоновое изображение для другой цели, но Кну дал быстрое и хорошее решение. Я проверил это, и это работает как шарм. - person David; 14.12.2011

arrow_upward
0
arrow_downward

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

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

person webinista    schedule 25.01.2011