IE9 CSS在li中安排两个项目的问题

Question

请看一下这个： JSFiddle
在firefox，chrome，opera是代码好的， 但在ie9中移动数字，请看图片。 左边就是一切都好，右边是ie9。 http://imageshack.us/photo/my-images/707/asdlj.png/

我无法解决问题，需要帮助:(

HTML

<ul id="category">
    <li>
        <p>
            35
        </p>
        Spiele
    </li>
    <li>
        <p>
            352
        </p>
        Puppen
    </li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#category {
    float:left;
    background:#e8e8e8;
}
#category li {
    line-height: 20px;
    padding: 10px 30px;
    cursor:pointer;
}
#category p {
    margin:0 0 0 20px;
    padding:0;
    float:right;
    font-size:18px;
}

我已大大简化了代码。

Stenzg

Answer 1

我相信这可以作为使用<table>的时间。这是处理此特定问题的更清晰且兼容的方式。您不会遇到任何浏览器问题。试试这个：

<table>
  <tr>
    <td>Spiele</td>
    <td>35</td>
  </tr>

  <tr>
    <td>Puppen</td>
    <td>352</td>
  </tr>
</table>

还有一些基本的CSS：

table {
  background-color: #e8e8e8;
}

table td {
  padding: 10px;
}

jsfiddle

如果您不熟悉使用它们，请查看MDN表tutorial。