html - 具有列表样式位置的列表项上的意外间距：在 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

不同的浏览器呈现略有不同，但我个人会做以下事情：

.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 + 背景图像。

Answer 2

I would remove the <p> tag from inside the <li> tag as its a list entry you don't need it, (what you have done is added a paragraph the list entry) you then just style the <ol> tag and <li> tag