菜单按钮002 双竖线样式，存在兼容问题，求大虾指导！-CSDN博客

本文链接：https://blog.csdn.net/songkaili/article/details/83951227

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>双竖线菜单</title>
<style type="text/css">
#menu{
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	width:120px;
	padding:8px;
	background-color:#ccc;
	margin:0px auto;
	border:1px solid #ccc;
}

#menu a,#menu a:visited{
	display:block;
	background-color:#fff;
	padding:4px 8px;
	color:#000;
	text-decoration:none;
	margin:8px 0;
	border-left:8px solid #9ab;
	border-right:8px solid #9ab;
}
#menu a:hover{
	color:#f00;
	border-left:8px solid #000;
	border-right:8px solid #000;
}

#menu a#first, #menu a#last{
	margin:0;/*由于浏览器的塌陷作用，第一个和最后一个宽度依然保持8px，但是IE中出现兼容性问题*/
	
	}
/*存在兼容问题，在IE中下方的高度还是双倍，在火狐浏览器中显示是正确的*/
</style>
</head>

<body>
<div id="menu">
 <a href="#" id="first">Home</a>
 <a href="#">Contact</a>
 <a href="#">Web DEV</a>
 <a href="#">Web Design</a>
 <a href="#" id="last">Map</a>
</ul>
</div>
</body>
</html>