Question

我使用Jquery UI来显示在Firefox和Chrome中运行良好的calalnder，但在IE11中，它会使日期行变得很大。

以下是它在IE 11中的外观

IE Problems

以下是它在Firefox和Chrome上的外观

Normal

这是我写的用于修改单元格看起来我想要的方式的css

 .ui-datepicker {
        width: 17em;
        padding: .2em .2em 0;
        display: none;
        width: 333px !important;
        background-image: none;
    }

    .ui-widget-header {
        background: none !important;
        border: none !important;
    }

    .ui-widget-content { background: none !important; }

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: .2em 0;
    }

    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 2px;
        width: 1.8em;
        height: 1.8em;
    }

    .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }

    .ui-datepicker .ui-datepicker-prev { left: 2px; }

    .ui-datepicker .ui-datepicker-next { right: 2px; }

    .ui-datepicker .ui-datepicker-prev-hover { left: 1px; }

    .ui-datepicker .ui-datepicker-next-hover { right: 1px; }

    .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -8px;
        top: 50%;
        margin-top: -8px;
    }

    .ui-datepicker .ui-datepicker-title {
        margin: 0 2.3em;
        line-height: 1.8em;
        text-align: center;
    }

    .ui-datepicker .ui-datepicker-title select {
        font-size: 1em;
        margin: 1px 0;
    }

    .ui-datepicker select.ui-datepicker-month-year { width: 100%; }

    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        width: 39%;
        border: none;
    }

    .ui-datepicker table {
        /*width: 100%;
           font-size: .9em;
            border-collapse: collapse;
            margin: 0 0 .4em;*/
        width: 341px;
        height: 216px;
        font-size: small;
        font-family: Open Sans;
        color: rgb(214, 214, 214); 

        background-color: rgb(62, 62, 62);
        border-collapse: collapse;
    }

    .ui-datepicker th {
        padding: .7em .3em;
        text-align: center;
        font-weight: 100;
        font-size: 12px;
        text-transform: uppercase;
        height: 25px;
        border: 0;
    }

    .ui-datepicker a:hover {
        color: #ffffff;
        text-decoration: underline;
        text-align: center;
        font-size: 11px;
        font-weight: 800;
    }

    .ui-datepicker td {
        border: 0;
        padding: 1px;
    }

    .ui-datepicker td span, .ui-datepicker td a {
        display: block;
        padding: .2em;
        text-align: right;
        text-decoration: none;
    }

    .ui-datepicker .ui-datepicker-buttonpane {
        background-image: none;
        margin: .7em 0 0 0;
        padding: 0 .2em;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .ui-datepicker .ui-datepicker-buttonpane button {
        float: right;
        margin: .5em .2em .4em;
        cursor: pointer;
        padding: .2em .6em .3em .6em;
        width: auto;
        overflow: visible;
    }

    .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; }

    /* with multiple calendars */

    .ui-datepicker.ui-datepicker-multi { width: auto; }

    .ui-datepicker-multi .ui-datepicker-group { float: left; }

    .ui-datepicker-multi .ui-datepicker-group table {
        width: 95%;
        margin: 0 auto .4em;
    }

    .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; }

    .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; }

    .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; }

    .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width: 0; }

    .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; }

    .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; }

    .ui-datepicker-row-break {
        clear: both;
        width: 100%;
        font-size: 0em;
    }

    /* RTL support */

    .ui-datepicker-rtl { direction: rtl; }

    .ui-datepicker-rtl .ui-datepicker-prev {
        right: 2px;
        left: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-next {
        left: 2px;
        right: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-prev:hover {
        right: 1px;
        left: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-next:hover {
        left: 1px;
        right: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; }

    .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }

    .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float: right; }

    .ui-datepicker-rtl .ui-datepicker-group { float: right; }

    .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
        border-right-width: 0;
        border-left-width: 1px;
    }

    .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
        border-right-width: 0;
        border-left-width: 1px;
    }

    /* IE6 IFRAME FIX (taken from datepicker 1.5.3 */

    .ui-datepicker-cover {
        display: none; /*sorry for IE5*/
        display/**/: block; /*sorry for IE5*/
        position: absolute; /*must have*/
        z-index: -1; /*must have*/
        filter: mask(); /*must have*/
        top: -4px; /*must have*/
        left: -4px; /*must have*/
        width: 200px; /*must have*/
        height: 200px; /*must have*/
    }

如果您在顶部使用JSFiddle，您可以看到差异。我一直在检查元素，并试图改变一些东西，让它在IE中正确渲染，但还没有让它工作。我希望有人可以解决这个问题。

Answer 1

当我查看DOM时，我看到<tbody style="height:182px;">。当我注释掉它的高度时它按预期工作。它看起来就像是尊重tbody上的高度样式，而其他浏览器却没有。

在IE11中破坏了Jquery UI Datepicker

1 个答案: