Unexpected spacing on list-item with list-style-position: inside in Internet explorer

Question

http://krill.larvit.se/resihop_dev/ ,right column ordered list.

HTML:

<ol class="instructions">
  <li>
    <p>För att hitta samåkningar, klicka på kartan på platsen du vill åka ifrån.</p>
  </li>
</ol>

What I believe is the relevant CSS:

.instructions{
    padding-left: 0;
}
.instructions li{
    padding: 0 10px;
    margin: 0 0 10px 0;
    list-style-position: inside;
    font-size: 25px;
}

.instructions li p{
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    width: 360px;
}

In internet explorer 9, a large space is added on the right side of the "1". What can I do about this? If possible I would like to keep the html-markup.

Answer 1

我将从<li>标记内删除<p>标记，因为它不需要列表条目（ 您所做的就是在列表条目中添加了一个段落 ），然后只需对<ol>标记设置样式并<li>标签

Answer 2

The different browsers render slightly differently but I would personally do the following:

.instructions li{
    padding: 0;
    margin: 0 0 10px 30px;
    font-size: 25px;
}

That will display fairly close in all browsers, and if you want it closer you need to either make the font size of the 1. smaller or add a left margin of -XXpx to the paragraph

.instructions li p{
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    width: 360px;
    margin-left:-8px;
}

Another alternative would be to have the numbers as a CSS sprite + background image on the li.