html - 导航中间的横幅被剪裁在 Internet Explorer 里面？

Question

这是我第一次尝试在导航中间编写横幅，不幸的是它没有那么好。我不知道我应该做什么，因为我尝试了溢出，但它似乎没有用。

HTML：

<nav>
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">Register</a></li>
    <li><a href="">About</a></li>
    <li class="logo"><a href="#"></a></li>
    <li><a href="">Home</a></li>
    <li><a href="">Register</a></li>
    <li><a href="">About</a></li>
</ul>
</nav>

风格：

nav ul {
width: auto;
height: 74px;
position: relative;
z-index: 5;
overflow: visible;
}

nav ul li {
list-style-type: none;
float: left;
display: inline-block;
padding: 0px 30px;
width: auto;
height: 74px;
}

nav ul li.logo {
background: url(logo.png) no-repeat; 
width: 200px; 
height: 175px; 
position: relative;
top: -83px;
left: 5px;
}

如您所见，横幅大于导航本身的高度，并且在 Chrome、Firefox 和 Opera 等浏览器上显示良好。但是，在 Internet Explorer 上，横幅显示在内部并且没有溢出。我尝试了溢出属性，但它们似乎不起作用。我应该怎么办？