如何居中CSS菜單並擺脫ie左邊距空間？

感謝您閱讀本文，我有一個菜單，以填充左側的ul爲中心，但我認爲在左側的IE中留下了一點白色的空白區域如何居中CSS菜單並擺脫ie左邊距空間？

在Chrome，Firefox中看起來沒問題和Opera但IE（每個版本）的空間，並且其不居中

這裏是HTML

<div class="menu"> 
<ul> 
<li id="current"><a href="#">Strona Glowna</a></li> 
<li><a href="#">O nas</a></li> 
<li><a href="#">Wlasciciel</a></li> 
<li><a href="#">Kontakt</a></li>     
</ul> 
</div>

而CSS

.menu { 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:opx; 
    font: 100% Arial; 
    font-size:14px; 
    font-weight:900; 
} 
.menu ul { 
    background:#333333; 
    height:35px; 
    list-style:none; 
    margin:auto; 
    padding:0 242px 0; 
    } 
.menu li { 
    float:left; 
    padding:0px; 
    } 
.menu li a { 
    background:#333333 url("images/seperator.gif") bottom right no-repeat; 
    color:#cccccc; 
    display:block; 
    font-weight:normal; 
    line-height:35px; 
    margin:0px; 
    padding:0px 25px; 
    text-align:center; 
    text-decoration:none; 
    } 
    .menu li a:hover, .menu ul li:hover a { 
     background: #FF0000 url("images/hover.gif") bottom center no-repeat; 
     color:#FFFFFF; 
     text-decoration:none; 
     } 

.menu li ul { 
    background:#333333; 
    display:none; 
    height:auto; 
    padding:0px; 
    margin:0px; 
    border:0px; 
    position:absolute; 
    width:225px; 
    z-index:200; 
    } 
.menu li:hover ul { 
    display:block; 
    } 
.menu li li { 
    background:url('images/sub_sep.gif') bottom left no-repeat; 
    display:block; 
    float:none; 
    margin:0px; 
    padding:0px; 
    width:225px; 
    } 
.menu li:hover li a { 
    background:none; 
    } 
.menu li ul a { 
    display:block; 
    height:35px; 
    font-size:12px; 
    font-style:normal; 
    margin:0px; 
    padding:0px 10px 0px 15px; 
    text-align:left; 
    } 
    .menu li ul a:hover, .menu li ul li:hover a { 
     background:#2580a2 url('images/hover_sub.gif') center left no-repeat; 
     border:0px; 
     color:#ffffff; 
     text-decoration:none; 
     } 
    .menu li ul #current { 
    background:#2580a2 url('images/hover_sub.gif') center left no-repeat; 
    border:0px; 
    color:#ffffff; 
    text-decoration:none; 
    } 
.menu p { 
    clear:left; 
    }

現場演示可以在adamlisik.co.uk/kantor

感謝您的幫助

來源

2012-04-12 thepolishboy

發現是自己的身體爲中心？ – hjpotter92 2012-04-12 21:51:33

您似乎在'.menu'的CSS中爲'opx''填充'而不是'0px'。 – 2012-04-12 21:55:33

你需要聲明一個DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

來源

2012-04-13 02:57:37 chadpeppers

謝謝你的訣竅！ – thepolishboy 2012-04-13 20:29:15

如何居中CSS菜單並擺脫ie左邊距空間？

回答

相關問題