1

我有一个包含 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>
4

1 回答 1

0

这行得通吗？

这是我的小提琴

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;
}
于 2013-01-17T19:00:16.230 回答