これは私のブラウザの 100% のメニュー バーです。
これは、特定のズーム レベルと他のブラウザーで発生することです。
フィドルの簡略版は次のとおりです。http://jsfiddle.net/heetertc/ARGm8/6/
<div id="bar">
<div id="center-menu">
<ul id="nav">
<li><a href="/about/">ABOUT</a></li>
<li><a href="/bacharach-institute/">THE INSTITUTE</a></li>
<li><a href="/renaissance-pavilion/">RENAISSANCE PAVILION</a></li>
<li><a href="/day-rehab/">DAY REHAB</a></li>
<li><a href="/outpatient-services/">OUTPATIENT SERVICES</a></li>
<li><a href="/therapy-centers/">THERAPY CENTERS</a></li>
<li><a href="/blog/">NEWS</a></li>
<li><a href="/contact/">CONTACT</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
<style type="text/css">
ol, ul {
list-style: none outside none;
}
#bar {
height: 50px;
left: 0;
margin-top: 8px;
position: absolute;
width: 100%;
}
#bar ul {
text-align: center;
}
#center-menu{
height: 50px;
margin: 0 auto;
width: 954px;
}
#nav {
list-style: none outside none;
margin-bottom: 0;
margin-top: 0;
padding-top: 0;
width: 100%;
}
#nav li {
border-left: 1px solid #0c4b89;
display:block;
float:left;
height: 50px;
line-height: 50px;
padding-top: 0;
position:relative;
z-index:500;
}
#nav li a {
color: #FFFFFF;
display: block;
font-size: 12px;
font-weight: bold;
height: 50px;
padding-left: 18px;
padding-right: 18px;
text-align: left;
text-decoration: none;
text-shadow: 0 1px 1px #000000;
}
#nav > li:last-child {
border-right: 1px solid #0C4B89;
}
</style>
これは本当に簡単なことだと思いますが、私は数日間それに取り組んでいて、サイズ変更の多くの試みを含め、さまざまなことを試しました.
では、最後の要素が次のレベルにスキップするのはなぜですか。ズームが異なる場合のみです。あるズーム レベルに合わせてサイズを変更すると、別のズーム レベルではまったく異なって見えます。ズームに関係なく、常に 954px の #bar 要素を埋める方法はありますか?