html - 为什么那里有一条线？

我怀疑这里的错误与导航栏周围的阴影有关。下方有一条灰色的线，它根本不在原始图像上。我不知道如何摆脱它，并且当您与下面的图片之间的边距设置为0时，该行之间的距离很小。



CSS：

.wrap {
width:90%;
background-image: url(images/navbarbackground.png);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
box-shadow:5px 5px 20px rgba(0,0,0,0.3);
padding:0px;
font-family:minecrafter;
}

.wrap:after{
content:" ";
clear:both;
display:block;
height:0;
visibility:hidden;
}

.wrap ul {
width:97%;
padding: 0;
}

.wrap li {
display:inline-block;
float: left;
width: 20%;
vertical-align:middle;
}

.wrap li a {
text-decoration:none;
background-color:#EEEEEE;
color:#666666;
padding:6px 0 6px 0;
border:1px solid #CCC;
border-right:1px solid #333;
border-bottom:1px solid #333;
display:block;
text-align:center;
}

.wrap h2 {
margin-top:10px;
margin-bottom:10px;
text-transform:uppercase;
color:#ffffff;
width:6em;
text-align:center;
line-height:1.0;
letter-spacing:.04em;
display:in line-block;
vertical-align:middle;
float:left;
}

.wrap h2 span {
display:block;
letter-spacing:.17em;
}

.navwrap {
margin-top:0px;
overflow:hidden;
padding-top:16px;
padding-bottom:0px;
margin-bottom:10px;
}

ul {
margin:0;
padding:0;
list-style:none;
}

.wtmu {
width:90%;
height:250px;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
}

和HTML：

    <div class="wrap">
        <h2 class="minecrafter">Miners <span>Union</span></h2>
            <div class="navwrap">
                <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Forums</a></li>
                    <li><a href="#">Donate</a></li>
                    <li><a href="#">Apply</a></li>
                    <li><a href="#">Map</a></li>
                </ul>
            </div>
    </div>

谢谢！

最佳答案

这是没有灰色阴影的http://jsfiddle.net/a47be5yf/，条形图在图像中或者div比原始图像大一点：

.wrap {
width:90%;
background-image: url(images/navbarbackground.png);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
box-shadow:5px 5px 20px rgba(0,0,0,0.3);
padding:0px;
font-family:minecrafter;
height: 100px; /* or other */
}