img和其他标签中间有一条背景线

解决方案有4种，是一位全栈大哥告诉的！

下面是HTML文件

<header>
		<img src="photo.jpg"/>
		<nav>
			<ul>
				<li><a href="index.html">home</a></li>
				<li><a href="About.html">About</a></li>
				<li><a href="Photos.html">Photos</a></li>
				<li><a href="Live.html">Live</a></li>
				<li><a href="Contact.html">Contact</a></li>
			</ul>
		</nav>
	
	</header>

下面是css文件

*{
	margin:0;
	padding:0;
}
body{
	background:#555;
}
header{
	width:900px;
	height:700px;
	margin:20px auto;

}
li{
	float:left;
	display:inline;
	width:180px;
	height:30px;
	text-align:center;
	background:#777;
	line-height:30px;
}
a{
	color:#fff;
	text-decoration:none;
	display:block;
}
a:hover{
	background:#555;
}
.wenzi{
	color: #eee;
}

第一种方法没有实验；
第二种方法解决，但文字消失要从新设置文字大小；
第三种解决方案完美解决；       垂直对齐：顶部；
第四种解决方案也完美解决；