0
從事學習模擬課程。它只是使用HTML和CSS簡單複製現有公司的網頁。上週所有瀏覽器中的所有功能都完美無缺。我昨天打開它在提交之前檢查它,並且存在問題。Chrome瀏覽器的CSS問題 - 導航元素凹凸
僅在Chrome瀏覽器中,我的導航欄的最後一個元素被直線向下調整爲19px。
相關的CSS。
#navbar {
position:absolute;
display:block;
top: 115px;
left:0px;
width:100%;
height: 45px;
background:url(../images/navbar_section.png) repeat-x;
padding:0px;
margin:0 auto;
text-align:center;
-webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.27);
-moz-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.27);
box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.27);
}
#navmenu {
float:left;
left:50%;
position:relative;
width:964px;
}
#navmenu ul, li {
display: inline;
}
#navmenu li a {
font-size:1em;
float: left;
color: white;
font-weight:bold;
border-left:2px groove #008dcb;
text-decoration: none;
line-height:45px;
position:relative;
margin-left:auto;
margin-right:auto;
right:50%;
padding-left:10px;
padding-right:10px;
width:138px;
}
#navmenu li a:hover {
color: white;
background:url(../images/navbar_visited.png);
}
#navmenu li:last-child a {
border-right:2px groove #008dcb;
}
相關的html。
<div id="navbar">
<div id="navmenu">
<ul>
<li><a href="#">SHOP</a></li>
<li><a href="#">WHY ALLTEL</a></li>
<li><a href="#">PLANS</a></li>
<li><a href="#">APPS & MORE</a></li>
<li><a href="#">CAREERS</a></li>
<li><a href="#">EMPLOYEES</a></li>
</ul>
</div><!--end of navmenu-->
</div><!--end of navbar-->
我知道這可能是一個有點混亂,如果你看一下css文件,看看navmenu和navmenu2,而只是專注於navmenu,作爲第二個是不同的風格,我還沒有實現。
我試過刪除寬度元素,沒有改變的錯誤。
我試着將上面的代碼複製到一個新的html文檔。同樣的錯誤。
我完全喪失。請幫忙!
* facepalm *我可以發誓我已經嘗試過,但我把填充重置到ul。問題解決了。對不起浪費你的時間!我會設置這個答案,但我不能,因爲我是一個新用戶。 – user2241342
你可以回答自己的問題,然後選擇答案作爲正確的答案:) – alicelieutier
7小時內我可以。說我的代表在10以下,我無法回答自己的問題。 – user2241342