如何让文本留在td ALWAYS的左上角？

Question

如果第二个div / span中的文本足够长，则第一个div / span保持在上角。但如果第二个div / span中没有任何内容，则第一个div / span位于td的中间。

我正在使用IE 8。

日历的HTML代码段

<table id="calendar">
    <thead>
        <tr><th>April</th></tr>
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tues</th>
            <th>Wed</th>
            <th>Thur</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div>
                    <span>1</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>2</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>3</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>4</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>5</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>6</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>7</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

日历的CSS

#calendar {
    border:2px solid black;
    height:100%;
    width:100%;
}

#calendar td {
    border:2px solid black;
}

#calendar td > div:first-child {
    text-align:left; 
    left: 0; 
    top: 0;
}

#calendar td > div:first-child > span{
    text-align:left; 
    left: 0; 
    top: 0;
}

#calendar td > div + div {
    clear:both;
    text-align:center;    
    font-weight:bold;
    white-space:normal;
}

Answer 1

vertical-align:top可以解决问题。

Answer 2

尝试这个

div {
    height: 14px;
    margin-top: -4px;
}