如何隐藏IE11中Kendo UI Editor可编辑内容的可调整边框？

我之前也碰到过类似的IE11兼容坑，针对Kendo UI Editor这个情况，单纯设置border: none;确实不管用——IE11会给编辑器里的可编辑元素自动加上选中后的调整边框和手柄，咱们可以试试这两个方案，双管齐下应该能解决：

• 方案一：用IE专属命令直接禁用元素调整功能
  IE11有个专属的文档命令，能直接关掉可编辑内容里元素的调整大小和表格编辑手柄，咱们可以在Kendo Editor初始化完成时执行这个命令：

$("#editor").kendoEditor({
    init: function() {
        // 检测当前是否是IE11环境
        if (navigator.userAgent.indexOf("Trident/7.0") > -1) {
            // 禁用元素调整大小
            document.execCommand("enableObjectResizing", false, false);
            // 如果编辑器里用到表格，顺便禁用表格的编辑手柄
            document.execCommand("enableInlineTableEditing", false, false);
        }
    }
});

这个方法比CSS更直接，是从根源上关掉IE的这个默认行为。

• 方案二：用CSS兜底覆盖IE的默认样式
  如果上面的命令还没完全解决问题，再加上CSS彻底去掉边框和选中样式：

/* 覆盖Kendo编辑器内容区域的默认边框和选中样式 */
.k-editor .k-editor-content {
    outline: none !important;
    border: none !important;
}

/* 针对编辑器内的可编辑元素 */
.k-editor-content [contenteditable=true] {
    -ms-user-select: none;
    user-select: none;
    resize: none !important;
    outline: none !important;
    border: none !important;
}

/* 去掉IE自带的清除按钮和展开箭头（如果有的话） */
.k-editor-content *::-ms-clear,
.k-editor-content *::-ms-expand {
    display: none !important;
}

我之前在项目里就是这么组合处理的，亲测能搞定IE11里的这个烦人的可调整边框问题~

内容的提问来源于stack exchange，提问作者Shiba Tatsuya