Question

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

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

在Chrome上可以正常工作的CSS

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

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

Answer 1

请参考this thread，使用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>

HTML代码如下：

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

这样的输出：

IE浏览器：

Chrome浏览器：

Answer 2

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

使用下面的类。这同样适用于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中不起作用

2 个答案: