Kendo UI DatePicker 动画导致日历重复

Question

我有一个 Kendo UI DatePicker。仅在 IE 中，当我打开它并单击月份时，日历会被复制（问题与 Kendo datepicker 在动画期间显示两个月相同，但那里的答案对我不起作用）：

当我使用 IE 的调试器从元素中删除框大小调整样式时，日历将按预期工作：

我的问题有两个：

1. 有谁知道为什么盒子大小会导致这种情况发生？

2. 如何使用 jQuery 将这个属性设置为空（或完全删除它）？

我已经尝试这样做，但它并没有删除它：

$('.k-calendar-container').parent('.k-animation-container').css('box-sizing', '');

我还尝试将属性值从 content-box 更改为 border-box，虽然该值已更改，但它并不能解决问题：

$('.k-calendar-container').parent('.k-animation-container').css('box-sizing', 'border-box');

Answer 1

我找到的解决方案是直接通过样式表。然而，因为覆盖 kendo.common.less （其中找到动画容器的类 controllwing）并不是一个好主意，所以我所做的是编写自己的 less 文件来覆盖 kendo 样式表并仅包含需要调整的类:

kendo-override.less:

/* In the original kendo.common.less file, the class includes
   box-sizing: content-box

   This was causing IE kendo UI DatePicker
   to duplicate the calendar when you clicked to change the month.
*/
.k-animation-container,
.k-animation-container *,
.k-animation-container *:after,
{
   -webkit-box-sizing: content-box; // chrome
   -moz-box-sizing: content-box; // firefox
}

Answer 2

你可以用CSS来做 只需覆盖这个 css 类

.k-calendar-table {
width: 100% !important;
display:table-cell !important;
}