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边框就行。

改正后的代码