今天在網上看到一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>
錯誤效果（沒有margin:-5px 0 0 -5px;時的效果）：
切記文檔聲明<DOCTYPE HTML>也很重要，如果沒有此聲明，IE8瀏覽器會出意外，如下：
