2013-04-03 57 views
0

從事學習模擬課程。它只是使用HTML和CSS簡單複製現有公司的網頁。上週所有瀏覽器中的所有功能都完美無缺。我昨天打開它在提交之前檢查它,並且存在問題。Chrome瀏覽器的CSS問題 - 導航元素凹凸

僅在Chrome瀏覽器中,我的導航欄的最後一個元素被直線向下調整爲19px。

頁面。 link
css。 link

相關的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文檔。同樣的錯誤。

我完全喪失。請幫忙!

+0

* facepalm *我可以發誓我已經嘗試過,但我把填充重置到ul。問題解決了。對不起浪費你的時間!我會設置這個答案,但我不能,因爲我是一個新用戶。 – user2241342

+1

你可以回答自己的問題,然後選擇答案作爲正確的答案:) – alicelieutier

+0

7小時內我可以。說我的代表在10以下,我無法回答自己的問題。 – user2241342

回答

0

清除填充。這是張貼,所以有一個列出,公認的解決這個問題。