水平菜单 - IE中的差距

我正在研究一个940像素宽的小型个人网站。我想建立一个包含6个网站全部宽度的菜单。我设法使菜单在Firefox，Chrome和Opera中完美无瑕，但在IE中，我在最后一个元素的末尾留下了一点（4-5px）的空白。任何想法我怎么能删除这个空间？水平菜单 - IE中的差距

下面是菜单CSS：

#menu ul { 
    list-style: none; 
    width: 100%; 
} 

#menu li { 
    display: inline-block; 
    *display: inline; 
    text-align: center; 
    padding: 30px 0 30px 0; 
} 

#menu a { 
    text-decoration: none; 
    font-size: 16px; 
    border-right: 1px solid #C1BEBA; 
    padding: 10px 56px 10px 56px; 
}

和HTML

<ul id="menu"> 
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
    <li><a href="#">Menu 4</a></li> 
    <li><a href="#">Menu 5</a></li> 
    <li><a href="#">Menu 6</a></li> 
</ul>

LIVE DEMO

来源

2012-11-10 user1814514

HTML行3：更改'

Menu 2

'和'

Menu 2

'，' “＃”“'是错误。 –

没有错误:) – user1814514

有几个与你的代码，你的计划的问题。

你真的需要决定：你想要菜单项之间有任何空格。如果你不这样做，并且你希望它们相互接触，并触摸940px宽页面的边，那么你的当前计划将不起作用，因为940/6 = 156.666会重复出现。这不是像素完美，看起来很糟糕。如果你想要菜单项之间的空间，那么你需要为所有的菜单项设置一个宽度。如果您只是使用填充，那么当您放入太多或太少的文本时，页面布局将会中断，否则将会不均匀，除非您使用更多CSS。
您的代码有错误，有些地方像#menu ul。它应该是ul＃菜单。这就是为什么你的一些代码不工作。
如果您希望它看起来与其他浏览器中的相同，则需要对IE使用CSS重置。我在下面的代码中使用了一个简单的重置，但我建议您使用Google IE CSS Resets并为您选择最合适的一个。
这是我放在一起的示例代码。我已经改变了你的一些，但希望它会有所帮助。我为li标签添加了一个右边距，然后为a标签添加了一个负边距，以确保文本在边框之间很好地居中。如果你希望菜单项具有不同的背景颜色，这将会改变，你只需要用你的CSS宽度和边距来做数学运算。

你可以看到这段代码的完整的例子： http://code.bengrunfeld.com/iewithhorizontalmenu.html

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline; 
} 

body { 
    background:#aaa; 
    width:940px; 
} 

ul#menu { 
    background:#fff; 
    list-style: none; 
    width:940px; 
    height:80px;  
} 

#menu li { 
    width:145px; 
    display:inline-block;  
    padding: 30px 0; 
    margin-right:13px; 
    float:left; 
    border-right: 1px solid #C1BEBA; 
} 

#last { 
    margin-right:0px !important; 
    border-right:none !important; 
} 

#menu a { 
    width:158px; 
    text-decoration: none; 
    font-size: 16px; 
    text-align:center; 
    margin-left:-13px; 
    display:block; 
} 

<ul id="menu"> 
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
    <li><a href="#">Menu 4</a></li> 
    <li><a href="#">Menu 5</a></li> 
    <li id="last"><a href="#">Menu 6</a></li> 
</ul>

来源

2012-11-11 04:21:02 Ben

水平菜单 - IE中的差距

回答

相关问题