0

我在日历上显示了事件，现在当 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; 
}
4

1 回答 1

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;然后刷新页面。

如果第一次没有更正它，也可能需要清空任何浏览器和服务器缓存。

于 2013-09-18T23:44:58.497 回答