html - 带有 css 的静态水平导航栏 - IE 和 Chrome 之间的边距问题

Question

我有一个带有 4 <li> 的静态导航栏元素，应该向用户显示他/她在网站上的进度。
每个元素的宽度都是预定义的以适应页面。现在，当我显示该网站时，它在 IE 上从左向右延伸，但在 Chrome 上却缩短了 10 个像素。

我正在寻找一种更流畅的方式来使 IE/FF/Chrome 保持一致。亲切的问候

CSS:

ul#progress {
  list-style:none;
  margin-bottom:2px;
  padding:0px;
  height: auto;
  display: table;
  float:left;
}
ul#progress li {
  list-style-type:none;
  display:table-cell;
  padding-left:9px;
  padding-bottom:5px;
  background-color: #EBEBEB;
}
* ul#progress li {
  list-style-type:none;
  list-style: none;
  display: inline-block;
  line-height: 20px; 
  padding-top: 5px;
} 
ul#progress li.selected {
  font-weight:bold;
  color: #FFFFFF;
  background-color:#FF8040!important;
}

HTML:

<li id="li_pers" runat="server" style="width:176px"><span class="nav">1. some text</span></li>
<li id="li_bew" runat="server" style="width:176px"><span class="nav">2. more text</span></li>
<li id="li_anl" runat="server" style="width:176px"><span class="nav">3. and more</span></li>
<li id="li_ueb" runat="server" style="width:262px"><span class="nav">4. and somewhat more because of long words</span></li>

Answer 1

这个有用吗？

这是我的 Fiddle

HTML:

<ul id="progress">
  <li id="li_pers" runat="server"><span class="nav">1. some text</span></li>
  <li id="li_bew" runat="server"><span class="nav">2. more text</span></li>
  <li id="li_anl" runat="server"><span class="nav">3. and more</span></li>
  <li id="li_ueb" runat="server"><span class="nav">4. and somewhat more because of long words</span></li>
</ul>

CSS:

ul#progress {
  list-style: none;
  margin-bottom: 2px;
  padding: 0;
  display: table;
  float: left;
  width: 790px;
}

ul#progress li {
  display: table-cell;
  line-height: 20px; 
  padding: 5px 0 5px 9px;
  background-color: #EBEBEB;
  width: 176px;
}

ul#progress li#li_ueb {
  width: 262px;
}

ul#progress li.selected {
  font-weight: bold;
  color: #FFFFFF;
  background-color: #FF8040!important;
}