今天在网上看到一css笔试题，乍一看很简单，实则内部暗藏玄机，题目大概是：九宫格，每格长宽50px，边框宽度5px，鼠标经过边框变红，效果如下：
鼠标路过时：
以下是代码（如有不足之处望多加指正）
<!DOCTYPE HTML>
<html>
<head>
<style>
*{margin:0px;padding:0px;} ul{
width:165px;
height:165px;
margin:20px auto;
}
li{
width: 50px;
height:50px;
margin:-5px 0 0 -5px; //关键代码
float:left;
background: #ccc;
border:5px solid blue;
text-align:center;
line-height:50px;
cursor:pointer;
list-style-type: none;
}
li:hover{
border-color:red;
position:relative; //最为重要的一条代码，否则会出现下图中的错误
}
</style>
<script language="JavaScript"> </script>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
错误效果（没有position:relative;时的效果）：
错误效果（没有margin:-5px 0 0 -5px;时的效果）：
切记文档声明<DOCTYPE HTML>也很重要，如果没有此声明，IE8浏览器会出意外，如下：
