在 safari 浏览器中，子元素不会成为父元素的焦点答案

【问题标题】：Child element doesn't take the focus of the parent in safari browsers在 safari 浏览器中，子元素不会成为父元素的焦点
【发布时间】：2017-08-30 14:51:24
【问题描述】：

我有一个容器，当我单击它时，它会获得焦点并显示他内部的隐藏内容。

现在，在隐藏容器中有一个按钮，当您单击它时，它会获得焦点并关闭父级。

它适用于所有浏览器，除了 ios 和 macos 上的 safari。

我正在寻找一个干净的 CSS 解决方案。

HTML

<div class="box" tabindex="0">
  <div class="front">CLICK ME</div>
  <div class="hidden">
    <button class="close">close button</button>
  </div>
</div>

SASS

.box{
  position:relative;
  height:200px; width:200px;
}

.front,
.hidden{height:100%; width:100%; position:absolute; }

.close{height:100px; width:100px;}

.box:focus{
  .front{display:none;}
  .hidden{display:block;}
}

.front{background:blue; color:white;}
.hidden{background:red; display:none;}

DEMO

【问题讨论】：

标签： ios css macos safari sass

【解决方案1】：

将按钮标签更改为具有 tabindex 属性的不同元素（例如 DIV），然后它也可以在 Safari 中使用。

Safari 和 iOS 上的其他一些浏览器显然对按钮有奇怪的焦点行为。即使使用 tabindex，它们似乎也永远不会获得焦点。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus

例子

<button class="close">close button</button><!-- not working -->
<!-- Use instead -->
<div class="close" tabindex="0" role="button"></div><!-- working -->

DEMO

【讨论】：

【解决方案2】：

iOS 的解决方案是按住 Option Key + Tab 键。然后按钮将被标记。

【讨论】：