0

我的顶部菜单中项目的对齐方式在 Chrome/FF/IE7 中有效（通过使用 *'s），但在 IE10 中，最后一个元素在垂直方向上略微未对齐。有人知道为什么吗？

HTML：

<div class="top_">
    <div class="top_container_">
        <div class="top_container_prism_logo"><a href="#"><img src="../images/Imagine/left_prism_logo.png"></a></div>
        <div class="top_container_menu_container_">
            <div class="top_container_menu_centering_tool_">
                <ul class="top_container_menu">
                    <div class="top_container_menu_spacerLeft"></div><li class="top_container_menu_1"><span id="top_1">About RP Prism</span><div class="top_container_menu_spacerRight"></div>|</li><div class="top_container_menu_spacerLeft2"></div><li class="top_container_menu_2"><span id="top_2">Schedule A Demo</span><div class="top_container_menu_spacerRight"></div>|</li><div class="top_container_menu_spacerLeft2"></div><li class="top_container_menu_3"><span id="top_3">Contact Us</span><div class="top_container_menu_spacerRight"></div>|</li><li class="top_container_menu_4"><a href="http://www.rp.com">rp.com</a></li><li class="top_container_menu_5"><a href="http://www.rp.com" ><img src="../images/Imagine/top_container_menu_5.png"></a></li>
                </ul>
            </div>
        </div>
    </div>

CSS：

.top_ {
position:fixed;
width:100%;
min-width:990px;
padding-left:74px;
*padding-left:90px;
margin:0 auto;
z-index:300;
}

.top_container_ {
margin:auto;
padding-top:25px;
width:700px;
z-index:301;
}

.top_container_menu_container_ {
height:54px;
width:700px;
position:fixed;
z-index:302;    

}

.top_container_prism_logo {
position:absolute;
top:25px;
left:35px;
display:inline-block;
zoom:1; *display: inline;
z-index:70;
}

.top_container_menu_spacer {
display:inline-block;
zoom:1; *display: inline;
margin-right:25px;
}

.top_container_menu li {
display:inline-block;
zoom: 1; *display: inline;
height:33px;
z-index:303;
}

.top_container_menu {
min-width:680px;
position:relative;
display:inline-block;
zoom:1; *display:inline;
vertical-align:top;
padding:12px 0 0 9px;   

}

.top_container_menu_1, .top_container_menu_2, .top_container_menu_3, .top_container_menu_4 {
display:inline-block;
zoom: 1; *display: inline;
height:33px;
z-index:303;
*vertical-align:text-top;
*padding-top:2px;
color:#fff;
font-family: 'Oswald', sans-serif;
font-size: .7em;
*font-size: .8em;
}

.top_container_menu a, #top_2, #top_3, #top_4 {
text-decoration:none;
z-index:304;
*height:auto;
*line-height:1.4em;
padding-top:10px;
cursor:pointer;
color:#fff;
}

.top_container_menu a:hover, #top_1:hover, #top_2:hover, #top_3:hover, #top_4:hover {
color:#00afe7;
cursor:pointer;
}

.top_container_menu_3 {
margin-right:0;
}

.top_container_menu_4 {
margin-left:0;
margin:0;
width:105px;
padding-left:45px;

cursor:pointer;
}

.top_container_menu_4 a:hover {
color:#00afe7;
}

.top_container_menu a:visited{  /*has to be placed after hover for possible IE7 cascade bug/error */
color:#ffffff;
}

.top_container_menu_5 a, .top_container_menu_5 img {
display:inline-block;
zoom: 1; *display: inline;
width:65px;
padding-top:2px;
vertical-align:bottom;
z-index:305;
cursor:pointer;
margin-left:0;
}

.top_container_menu_spacerLeft, .top_container_menu_spacerLeft2, .top_container_menu_spacerRight {
display:inline-block;
*display:inline; zoom:1;
width:1px;
}


.top_container_menu_spacerLeft {
margin-left:20px;
*margin-left:0px;
}
.top_container_menu_spacerLeft2 {
margin-left:45px;
*margin-left:45px;
}

.top_container_menu_spacerRight {
margin-right:45px;
*margin-right:45px;
}
4

1 回答 1

0

添加：

.top_container_menu_5 {
    padding-bottom:20px;
}

并将 .top_container_menu_5 添加到：

.top_container_menu_1, .top_container_menu_2, .top_container_menu_3, .top_container_menu_4, .top_container_menu_5 {
    display:inline-block;
    zoom: 1; *display: inline;
    height:33px;
    z-index:303;
    *vertical-align:text-top;
    *padding-top:2px;
    color:#fff;
    font-family: 'Oswald', sans-serif;
    font-size: .7em;
    *font-size: .8em;
}

感谢@showdev

于 2013-10-10T20:31:25.680 回答