跨度之间的 CSS 空格线

Question

我有这样的结构:

<div class="gBigPage">
    <span class="gBigMonthShort">FEB</span><br />
    <span class="gBigDayShort">23</span><br />
    <span class="gBigYearShort">2011</span>
</div>

文本行之间的间隙太大，我需要将它们缩短以便它们几乎都接触到。

/* Mouseover div for day numbers */
.gBigPage{
    height:45px;
    width:30px;
    font-family:Arial;
    font-weight:bold;
    background-color:#ffee99;
    text-align:center;
    border-top:1px solid #c0c0c0;
    border-left:1px solid #c0c0c0;
    border-right:1px solid #c0c0c0;
    position:absolute;
    z-index:3;
}
.gBigPage:hover{
    cursor:pointer;
}
/* In the big day box, the month at top */
.gBigMonthShort{
    text-transform:uppercase;
    font-size:11px;
}
.gBigYearShort{
    font-size:11px;
}
.gBigDayShort{
    font-size:16px;
}

我无法对跨度进行相对定位，因为 Chrome 中存在一个会闪烁鼠标悬停效果的错误，纯 CSS 似乎是唯一可行的方法。

以 fiddle 为例: http://jsfiddle.net/GmKsv/

Answer 1

您所需要的只是您的 CSS 中的行高。将此添加到您的 gBigPage。

代码如下:

.gBigPage{
    height:45px;
    width:30px;
    font-family:Arial;
    font-weight:bold;
    background-color:#ffee99;
    text-align:center;
    border-top:1px solid #c0c0c0;
    border-left:1px solid #c0c0c0;
    border-right:1px solid #c0c0c0;
    position:absolute;
    z-index:3;
    line-height: 13px;
}

演示 jsFiddle

希望对您有所帮助!