html - 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;
}

我已经大大简化了代码。

斯坦茨

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如果您不熟悉使用它们。