html - IE9 CSS 问题与 li 中的两个项目的排列

Question

请看一下： Firefox、chrome、opera 中的JSFiddle
代码正常，但在 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;
}

我已经大大简化了代码。

斯坦茨格

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 表教程。