0

ナビゲーションの途中でバナーをコーディングするのはこれが初めてでしたが、残念ながらうまくいきませんでした。オーバーフローを試みましたが、うまくいかなかったようです。

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;
}

Internet Explorer で中央のバナーがオーバーフローしない例。

ご覧のとおり、バナーはナビゲーション自体の高さよりも大きく、Chrome、Firefox、Opera などのブラウザーで問題なく表示されます。ただし、Internet Explorer では、バナーが内側で切り取られて表示され、オーバーフローしません。オーバーフロー プロパティを試しましたが、機能していないようです。私は何をすべきか?

4

0 に答える 0