Css 边框框上的轮廓[在Chrome上的行为不一致]

给定一个带有

tabindex=“0”

的

div

，我在Firefox和Chrome上看到了这种奇怪的行为

.inner{
左边距：-20px；
左侧填充：20px；
}
.背景{
左边距：40px；
背景来源：内容框；
背景色：柠檬黄；
}
.custom_outline:focus{outline:3px纯蓝色；}

Firefox上的错误大纲
... 但在Chrome上更糟糕
福巴
Firefox上的错误大纲
... 但在Chrome上，如果我设定一个明确的轮廓，效果会更好
福巴

规范没有准确定义轮廓的绘制方式，除非它们不影响布局，并且它们可能是非矩形的。触发Chrome差异的原因可能首先取决于它是如何实现默认大纲的——你可以看出，使用纯CSS似乎什么都做不到

为了获得您想要的结果，您可以通过将大纲添加到绝对定位的

：：在焦点上的

伪元素之前（并禁用元素本身上的大纲）进行欺骗：

.inner{
左边距：-20px；
左侧填充：20px；
}
.背景{
左边距：40px；
背景来源：内容框；
背景色：柠檬黄；
}
.custom_大纲：焦点{
位置：相对位置；
大纲：0；
}
.custom_大纲：焦点：：之前{
内容：''；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
外形：3倍纯蓝；
z指数：-1；
}

默认轮廓
福巴
自定义轮廓
福巴

规范没有准确定义轮廓的绘制方式，除非它们不影响布局，并且它们可能是非矩形的。触发Chrome差异的原因可能首先取决于它是如何实现默认大纲的——你可以看出，使用纯CSS似乎什么都做不到

为了获得您想要的结果，您可以通过将大纲添加到绝对定位的

：：在焦点上的

伪元素之前（并禁用元素本身上的大纲）进行欺骗：

.inner{
左边距：-20px；
左侧填充：20px；
}
.背景{
左边距：40px；
背景来源：内容框；
背景色：柠檬黄；
}
.custom_大纲：焦点{
位置：相对位置；
大纲：0；
}
.custom_大纲：焦点：：之前{
内容：''；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
外形：3倍纯蓝；
z指数：-1；
}

默认轮廓
福巴
自定义轮廓
福巴

chrome绘制的区域边缘比正在聚焦的区域边缘多：

您可以将

大纲

重置为

无

，并使用

框阴影

.inner{
左边距：-20px；
左侧填充：20px；
}
.背景{
左边距：40px；
背景来源：内容框；
背景色：柠檬黄；
}
.custom_大纲：焦点{
长方体阴影：0 3px蓝色；
大纲：无；
}

框阴影轮廓Firefox
... 但在Chrome上，大纲也被重置为“无”
福
酒吧

chrome绘制的区域边缘比正在聚焦的区域边缘多：

您可以将

大纲

重置为

无

，并使用

框阴影

.inner{
左边距：-20px；
左侧填充：20px；
}
.背景{
左边距：40px；
背景来源：内容框；
背景色：柠檬黄；
}
.custom_大纲：焦点{
长方体阴影：0 3px蓝色；
大纲：无；
}

框阴影轮廓Firefox
... 但在Chrome上，大纲也被重置为“无”
福
酒吧

非常好的解决方案：）。。。但是，由于

z-index:-1

（这是强制性的），顶部轮廓由

div.context

上方相邻的

div.header

覆盖（请参见此处修改的Fiddle:）。如果大纲直接位于没有伪元素的

div.context

上，则不会发生这种情况。如何解决这个问题？@Kamafeather:如果你能负担得起使用

指针事件：none

（我不确定浏览器对它的支持程度），用它替换

z-index:-1

。非常好的解决方案：）。。。但是，由于

z-index:-1

（这是强制性的），顶部轮廓由

div.context

上方相邻的

div.header

覆盖（请参见此处修改的Fiddle:）。如果大纲直接位于没有伪元素的

div.context

上，则不会发生这种情况。如何解决这个问题？@Kamafeather:如果你能负担得起使用

指针事件：none

（我不确定浏览器对它的支持程度），用它替换

z-index:-1

。