html - CSS 绝对定位不起作用？

Question

我有事件显示在日历上，现在当 div 中有 txt 时，日历天数的高度和数字会失真。如果我有 txt，有什么想法可以使高度和数字不变？我猜它与相对或绝对定位有关，但我不太确定。谢谢!

这是发生了什么的图片:http://imgur.com/hkPPLvb

日历

<tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">1</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">2</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">3</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">4</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">5</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">6</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">7</div></div></td>
</tr>
<tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">8</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">9</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">10</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">11</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">12</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">13</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">14</div></div></td>
</tr>
<tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">15</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">16</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">17</div><div class="event">Bassmt Friday</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">18</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">19</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">20</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">21</div></div></td>
</tr>
<tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">22</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">23</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">24</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">25</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">26</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">27</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">28</div></div></td>
</tr>
<tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">29</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">30</div></div></td>

CSS:

table.calendar      { border-left:1px solid #999; }
tr.calendar-row {  }
td.calendar-day { min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover   { background:#eceff5; }
td.calendar-day-np  { background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number      { background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }

div.day-number   { 
    background:#999; 
    position:absolute; 
    z-index:2; 
    top:0px; 
    right:-20px; 
    padding:5px; 
    color:#fff; 
    font-weight:bold; 
    width:20px; 
    text-align:center; 
}
td.calendar-day, td.calendar-day-np { 
    width:120px; 
    padding:5px 25px 5px 5px; 
    border-bottom:1px solid #999; 
    border-right:1px solid #999; 
}

Answer 1

进入你的 base.css 文件并找到这个:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

删除最后一行 vertical-align: baseline; 然后刷新页面。

还可能需要清空任何浏览器和服务器缓存，如果它没有在第一时间纠正它的话。