Список <ul> - маркер меняет межстрочное расстояние

[rgl]

Есть такая проблема:

Нужно сделать список, причем один пункт списка пометить маркером-картинкой. Когда помечаю, маркер-картинка располагается вроде бы как надо, но текст сдвигается на несколько точек вниз, и как следствие, 1) располагается не против маркера а ниже 2) расстояние между помеченным пунктом и предыдущим становится больше.

Код:

<style type="text/css">
  ul {
        line-height: 25px; list-style-type: none; font-size: 15px;

        /* а это вроде к вопросу не должно иметь отношение, но для приближенности к реальной ситуации пусть будет */
        font-family: Arial Narrow; font-weight: bold; text-transform: uppercase;
     }

  li.marker { list-style-image: url("marker26x25.png") }

</style>


  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li class="marker">Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
  </ul>

Или тут: http://k776070q.bget.ru/marker-test.html

Расстояние между THREE и помеченным FOUR больше. Что я делаю не так?

[klierik]

https://jsfiddle.net/klierik/vmtgo4nh/1/

[SelenIT]

18 часов назад, rgl сказал:

Что я делаю не так?

Всё так... Просто эти маркеры списков — давнее больное место и CSS-стандарта, и браузеров. Они практически неуправляемы, требований к их отрисовке в стандарте практически нет — вот браузеры и делают, как им проще.

Поэтому на практике от list-style-image толку очень мало, для мало-мальски предсказуемого результата приходится идти обходным путем. Вроде того, что подсказали выше.