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

这将在所有浏览器中显示得相当接近，如果你想让它更近，你需要使字体大小变小或向段落添加 -XXpx 的左边距

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

另一种选择是将数字作为 CSS 精灵 + 背景图像放在 li 上。

Answer 2

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