JS实现简易日历过程中遇到的问题和原因以及解决方式。

下面是部分代码，主要错误在css样式部分（改错前）

html

<div id="container">
<ul>
<li class="active"><h1>1月</h1><p>JAN</p></li>
<li><h1>2月</h1><p>FEB</p></li>
<li><h1>3月</h1><p>MAR</p></li>
<li><h1>4月</h1><p>APR</p></li>
<li><h1>5月</h1><p>MAY</p></li>
</ul>
<div class="notes" style="display:block;">
<h1>1月活动</h1>
<p>快过年了！大家去干点啥呢？~</p>
</div>
</div>

css样式

ul li{
width: 100px;
height: 100px;
background-color: #40403F;
list-style: none;
text-align: center;
margin: 11px;
float: left;
color: white;
}
ul li:hover{
background-color: white;
color: #FF95BC;
border: 1px solid gray;
}

js

window.onload = function (){
var myArr = [
'快过年了！大家去干点啥呢？~',
'二月了，干点啥好呢？？？哈哈哈~开学快乐',
'阳春三月！走走走去春游~',
'四月嘛，好好学习进实验室，哈哈哈~',
'啦啦啦~五月啦！劳动假，走起！'
];
var myLi = document.getElementsByTagName('li');
var myNotes = document.getElementById('container').getElementsByTagName('div')[0];

for (var i = 0; i < myLi.length; i++) {
myLi[i].index = i;
myLi[i].onmouseover = function(){
for(i = 0;i < myLi.length; i++){
myLi[i].className = '';
}
this.className = 'active';
myNotes.innerHTML = '<h1>'+(this.index+1)+'月活动</h1><p>'+ myArr[this.index] +'</p>';
};
}
}

这部分代码的bug会这样显示：

*鼠标覆盖在前两列的时候会导致下一行的格子统一向下向右移*。

==这是因为我在hover之前并没有给它加border边框，所以在hover的时候如果加了border边框就会导致下一行的格子不能如期放在它该放的位置。这又是为什么呢，因为每一个li都有它唯一确定的高度和宽度，而hover上去宽和高都会多出两个像素，所以下一行的每一个li肯定不能放下，只能从多出的两个像素的位置开始摆放。但是最后一列却又似乎是对的是为什么呢？这是因为最后一列的hover上去超出两个像素影响的是下一行所有的li，而我们肉眼对两个像素又不能清楚分辨出来，所以感觉是对的，而实际上它是整体向下移动了。==

那么该如何解决这个问题呢？很简单，就只需要在hover之前也给它加上和hover之后的border边框就行。

改正后的代码