表格单元格边框太高，即使边框也是如此

Question

包含边框的行太高，即使我在所有元素上都指定了box-sizing: border-box;。 Example here

$(document).ready(function(){
    $(window).on('resize', calendarResize);
    calendarResize();
});

calendarResize = function() {
    var weeks = $('.week').length;
    var days = $('.day').length / weeks;
    var monthHeight = ((weeks / days) * $('.month').width()) * 0.66;
    var monthWidth = $('.month').width();
    var containerHeight = monthHeight + $('.title').outerHeight(true) + $('.days').outerHeight(true);
    $('.day').css({ width: monthWidth / days, height: monthHeight / weeks });
    $('.month').css({ height: containerHeight });
    $('#calendar').css({ height: containerHeight });
};

* {
    box-sizing: border-box;
}
.month {
    width: 100%;
    height: 100%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 18px;
}
.monthNav {
    background: transparent;
    border: none;
}
.title {
    display: table-caption;
    height: 50px;
    width: 100%;
}
.title i {
    font-size: 24px;
}
.week {
    display: table-row;
    width: 100%;
}
.days {
    display: table-row;
    width: 100%;
    font-size: 15px;
}
.calendar-label {
    display: table-cell;
    height: 25px;
    background-color: #BA141A;
    color: #FFFFFF;
}
.day {
    display: table-cell;
    height: 100%;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    color: #FFF;
}
.day:first-child {
    border-left: 1px solid #666;
}
.positionChildren {
    position: relative;
}
.positionChildren > .posLeft {
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translate(-1%, -50%);
    -moz-transform: translate(-1%, -50%);
    -webkit-transform: translate(-1%, -50%);
}
.positionChildren > .posCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.positionChildren > .posRight {
    position: absolute;
    top: 50%;
    left: 99%;
    transform: translate(-99%, -50%);
    -moz-transform: translate(-99%, -50%);
    -webkit-transform: translate(-99%, -50%);
}
.posCenter h1,
.posCenter h2,
.posCenter h3 {
    margin: 0px;
}

.day-empty{
    background-color: #A0A0A0; 
}
.day-event{
    background-color: #BA141A; 
}
.day-today{
    border: 1.5vw solid #C28F00 !important;
}

<div id="calendar"><div class="month">
    <div class="title positionChildren">
        <button class="posLeft monthNav" data-nav="08,2015"><i class="fa fa-arrow-left"></i></button>
        <span class="posCenter"><h3>September 2015</h3></span>
        <button class="posRight monthNav" data-nav="10,2015"><i class="fa fa-arrow-right"></i></button>
    </div>
    <div class="days">
        <div class="calendar-label positionChildren"><span class="posCenter">SUN</span></div>
        <div class="calendar-label positionChildren"><span class="posCenter">MON</span></div>
        <div class="calendar-label positionChildren"><span class="posCenter">TUE</span></div>
        <div class="calendar-label positionChildren"><span class="posCenter">WED</span></div>
        <div class="calendar-label positionChildren"><span class="posCenter">THU</span></div>
        <div class="calendar-label positionChildren"><span class="posCenter">FRI</span></div>
        <div class="calendar-label positionChildren"><span class="posCenter">SAT</span></div>
    </div>
        <div class="week">
                        <div class="day positionChildren day-empty">
            <span class="posCenter">30</span>
        </div>
                                <div class="day positionChildren day-event">
            <span class="posCenter">31</span>
        </div>
                                <div class="day positionChildren day-event day-today">
            <span class="posCenter">1</span>
        </div>
                                <div class="day positionChildren day-event">
            <span class="posCenter">2</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">3</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">4</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">5</span>
        </div>
                    </div>
        <div class="week">
                        <div class="day positionChildren day-empty">
            <span class="posCenter">6</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">7</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">8</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">9</span>
        </div>
                                <div class="day positionChildren day-event">
            <span class="posCenter">10</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">11</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">12</span>
        </div>
                    </div>
        <div class="week">
                        <div class="day positionChildren day-empty">
            <span class="posCenter">13</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">14</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">15</span>
        </div>
                                <div class="day positionChildren day-event">
            <span class="posCenter">16</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">17</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">18</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">19</span>
        </div>
                    </div>
        <div class="week">
                        <div class="day positionChildren day-empty">
            <span class="posCenter">20</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">21</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">22</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">23</span>
        </div>
                                <div class="day positionChildren day-event">
            <span class="posCenter">24</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">25</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">26</span>
        </div>
                    </div>
        <div class="week">
                        <div class="day positionChildren day-empty">
            <span class="posCenter">27</span>
        </div>
                                <div class="day positionChildren day-event">
            <span class="posCenter">28</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">29</span>
        </div>
                                <div class="day positionChildren day-event">
            <span class="posCenter">30</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">1</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">2</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">3</span>
        </div>
                    </div>
        <div class="week">
                        <div class="day positionChildren day-empty">
            <span class="posCenter">4</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">5</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">6</span>
        </div>
                                <div class="day positionChildren day-event">
            <span class="posCenter">7</span>
        </div>
                                <div class="day positionChildren day-event">
            <span class="posCenter">8</span>
        </div>
                                <div class="day positionChildren day-event">
            <span class="posCenter">9</span>
        </div>
                                <div class="day positionChildren day-empty">
            <span class="posCenter">10</span>
        </div>
                    </div>
    </div></div>

Answer 1

以下是CSS

.day-today{
    border: 1.5vw solid #C28F00 !important;
}

将其更改为您的要求

.day-today{
    border: .5vw solid #C28F00 !important;
}

Fiddle

Answer 2

感谢@ManojKumar我能够找出问题所在。 display: table-cell和box-sizing: border-box的元素表现得非常奇怪 - 边框不会影响宽度但会影响高度。解决方案是使用浮点数而不是CSS表，如JSFiddle中所示。