html - ol li内のフローティングスパンは、Firefoxでは正しく表示されますが、Chromeでは正しく表示されません

Question

それぞれ2つのスパンが並んでいて、等間隔に配置されているアイテムのリストを表示しようとしています。

HTMLは次のようになります。

<ol id="peerTimes">
   <li id="142_177_85_207__60212">
      <span class="ip">142.177.85.207</span>
      <span class="dateTime time">Tuesday, December 04, 2012 8:34:21 PM</span>
   </li>
   <li id="127_0_0_1__52375">
      <span class="ip">127.0.0.1</span>
      <span class="dateTime time">Tuesday, December 04, 2012 8:34:09 PM</span>
   </li>
</ol>

そして、CSSは次のようになります。

.ip {
    float: left;
    width: 170px; 
}
.dateTime {
    width: auto;  
}

Firefoxでは、これは私が望むように見えます：

しかし、Chromeでは、いくらいじっても、リストアイテム番号は常にフローティングスパンの後にプッシュされます。

このレイアウトを実現するためのクロスブラウザフレンドリーな方法はありますか？

Answer 1

CSS を次のように変更するだけです。

.ip {
    display: inline-block;
    width: 170px; 
}