Javascript 带有轮廓偏移的虚线轮廓在IE中不起作用

我必须以4px的特定偏移量在焦点上添加虚线轮廓，这在除IE之外的所有浏览器中都可以正常工作，因为它不支持轮廓偏移量，并且我无法在HTML中添加包装器元素作为填充处理，因为我试图在整个应用程序中进行通用修复，并且我无法添加边框：4px实心透明，因为元素有一个必需的边框，而伪元素将不起作用，因为我们有一个伪焦点类，我们不能使用框阴影，因为它不允许虚线轮廓

这就是我想在IE中实现的目标

Css在chrome上运行良好

.keyBoardUser input[type="radio"]:focus + div {
  //border: 4px solid transparent // cannot use this
  outline-offset: 4px;
  outline: 1px dashed black;
}

键盘用户是使用JS在制表符上添加的类。

请参阅，使用CSS伪元素或嵌套div设置border属性，并将其用作替代方法

示例代码如下：

<style> 
    .keyBoardUser {
        margin-left:20px;
        text-align: center;
        width:30px;
    }
    input[type="radio"]{
        width:20px;
        height:20px;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
        .keyBoardUser input[type="radio"]:focus + div { 
            outline-offset: 6px;
            outline: 2px dashed black;
        }
    }
        /*Microsft Edge browser*/
    @supports (-ms-ime-align:auto) {
        .keyBoardUser input[type="radio"]:focus + div { 
            outline-offset: 6px;
            outline: 2px dashed black;
        }
    }
        /*IE Browser*/
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .box {
            position: relative;
            text-align: center;
        }

        .keyBoardUser input[type="radio"]:focus + div:after {
            content: "";
            position: absolute;
            top: -6px;
            left: -6px;
            display: block;
            width: 40px;
            height: 40px;
            border: 2px dashed red;
        }

        .box input[type="radio"] {
            margin-left: 5px;
            margin-top: 5px;
        }
    } 
</style>

<div class="keyBoardUser ">
    <input id="Radio1" type="radio" />  
    <div class="box"><input id="Radio1" type="radio" checked="checked" /></div>
</div>

.键盘用户{
左边距：20px；
文本对齐：居中；
宽度：30px；
}
输入[type=“radio”]{
宽度：20px；
高度：20px；
}
@媒体屏幕和（-webkit最小设备像素比：0）和（最小分辨率：.001dpcm）{
.keyboard用户输入[type=“radio”]：focus+div{
轮廓偏移量：6px；
轮廓：2倍黑色虚线；
}
}
/*微英尺边缘浏览器*/
@支持（-ms-ime-align:auto）{
.keyboard用户输入[type=“radio”]：focus+div{
轮廓偏移量：6px；
轮廓：2倍黑色虚线；
}
}
/*IE浏览器*/
@介质全部和（-ms高对比度：无），（-ms高对比度：激活）{
.盒子{
位置：相对位置；
文本对齐：居中；
}
.keyboard用户输入[type=“radio”]：focus+div:after{
内容：“；
位置：绝对位置；
顶部：-6px；
左-6px；
显示：块；
宽度：40px；
高度：40px；
边框：2个红色虚线；
}
.box输入[type=“radio”]{
左边距：5px；
边缘顶部：5px；
}
} 

Html代码如下：

<style> 
    .keyBoardUser {
        margin-left:20px;
        text-align: center;
        width:30px;
    }
    input[type="radio"]{
        width:20px;
        height:20px;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
        .keyBoardUser input[type="radio"]:focus + div { 
            outline-offset: 6px;
            outline: 2px dashed black;
        }
    }
        /*Microsft Edge browser*/
    @supports (-ms-ime-align:auto) {
        .keyBoardUser input[type="radio"]:focus + div { 
            outline-offset: 6px;
            outline: 2px dashed black;
        }
    }
        /*IE Browser*/
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .box {
            position: relative;
            text-align: center;
        }

        .keyBoardUser input[type="radio"]:focus + div:after {
            content: "";
            position: absolute;
            top: -6px;
            left: -6px;
            display: block;
            width: 40px;
            height: 40px;
            border: 2px dashed red;
        }

        .box input[type="radio"] {
            margin-left: 5px;
            margin-top: 5px;
        }
    } 
</style>

<div class="keyBoardUser ">
    <input id="Radio1" type="radio" />  
    <div class="box"><input id="Radio1" type="radio" checked="checked" /></div>
</div>

输出如下所示：

IE浏览器：

Chrome浏览器：

---

在同级元素上使用伪元素来设置虚线轮廓的样式。我正在动态计算宽度和高度

使用下面的类。这也适用于IE

.keyBoardUser input[type="radio"]:focus + div::after {
  content: "";
  position: absolute;
  display: block;
  border: 4px solid transparent;
  outline: 1px dashed #000;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  top: -5px;
  left: -5px;
}

---

轮廓偏移量与IE检查不兼容-@SumitPatel是的，这就是问题所在，我需要解决这个问题。如果大纲没有虚线，那么解决方法非常简单，但由于它是虚线，我无法想出解决方案