迅雷面试第二题(采用滑动门)-CSDN博客

本文链接：https://blog.csdn.net/boiaprogramfan0420/article/details/7434660

今天上午把迅雷的第二题做了些，感觉还是有些收获的，发现了一些问题，先截个图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>迅雷第二题</title>
	<style>
		*{margin:0;padding:0;font-size:12px;color:#fff}
		div.menu{width:400px;margin:0 auto;}
		.menu ul{list-style:none;}
		.menu ul li{float:left;margin:10px;}
		.menu a{display:inline-block;text-decoration:none;background:url(bg.gif) no-repeat left top;
				padding-left:8px;}
		li span{display:inline-block;background:url(bg.gif) no-repeat right top;
				height:24px;line-height:24px;padding-right:8px;}
		.menu a:hover{text-decoration:none;background:url(bg.gif) no-repeat left -24px;
				padding-left:8px;}
		li a:hover span{background:url(bg.gif) no-repeat right -24px;color:#000;}
	</style>
</head>

<body>
	<div class="menu">
		<ul>
			<li><a href="#"><span>上一页</span></a></li>
			<li><a href="#"><span>1</span></a></li>
			<li><a href="#"><span>2</span></a></li>
			<li><a href="#"><span>3</span></a></li>
			<li><a href="#"><span>下一页</span></a></li>
		</ul>
	</div>
</body>
</html>

这里有一个问题，我本来是使用block的，我觉的应该没问题，然后试了下，在chrome ff 还有opera上都没有问题，

但今天我毫无征兆的打开了IE6，我预料中的问题出现了，你们可以试一下，inline-block在手册里我看到貌似不兼容ff，

试了下，一点问题也没有，估计ff也改了。

这里是用到的图片