具有list-style-position的列表项上的意外间距：Internet Explorer中的内部

Question

http://krill.larvit.se/resihop_dev/ ，右列排序列表。

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>

我相信是相关的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;
}

在Internet Explorer 9中，“ 1”的右侧添加了一个较大的空间。 我该怎么办？ 如果可能的话，我想保留html标记。

Answer 1

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

Answer 2

不同的浏览器呈现略有不同，但我个人将执行以下操作：

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

这将在所有浏览器中显示得非常接近，并且如果您想要使其更接近，则需要使1.的字体大小变小或在段落中添加-XXpx的左边距

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

另一种选择是将数字作为li上的CSS Sprite +背景图片。