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 に答える