Question

我遇到了以下问题。父元素内部相对定位的子元素可以接收标签焦点稍微溢出父div，并隐藏一些父标签焦点轮廓。在Chrome上，此轮廓部分隐藏，在IE上，此轮廓完全被子元素隐藏。

请参阅此附带的JSFiddle：https://jsfiddle.net/55h4wtrc/7/。

＆＃13;

.parent {
  padding: 0;
  border: none;
  margin-bottom: 10px;
}

.child {
  background: #fff;
  border: 1px solid #eee;
  position: relative;
  height: 40px;
  line-height: 40px;
}

＆＃13;

<div class='parent' tabindex='0'>
  <div class='child'>text</div>
</div>

<div class='parent' tabindex='0'>
  <div class='child'>text</div>
</div>

<div class='parent' tabindex='0'>
  <div class='child'>text</div>
</div>

＆＃13;

从position: relative;中删除CSS行.child可修复此错误行为。

在我的情况下，我需要轮廓完全可见，我还需要相对定位子元素。我还需要子元素具有比其父元素更高的z-index，因此没有z-index技巧来修复此bug将起作用。

有什么想法吗？

Answer 1

原因

来自CSS Basic User Interface Level 3 specification：

大纲不占用空间。

以后

这些轮廓的呈现堆叠明确地留给了实现，以便为每个平台提供更好的用户体验。 [...]

这意味着浏览器在渲染轮廓时非常自由。如果一个人在一个元素的边界内呈现它们，它们可能会被孩子覆盖。

缓解

您可以使用outline和outline-offset属性在轮廓期间手动设置自定义样式到轮廓，如this JSFiddle中所示，例如

.parent:focus {
  outline: hotpink dashed 2px;
  outline-offset: 2px;
}

如果这不成功，您也可以使用完全不同的工具，例如box-shadow，如this JSFiddle所示，例如

.parent:focus {
  outline: none;
  box-shadow: 0 0 2px 2px teal;
}

相对定位的孩子涵盖父母大纲

1 个答案:

原因

缓解