上下文：可聚焦元素中的绝对元素。
在Firefox 36中，如果可聚焦元素没有CSS位置（相对，固定或绝对），则单击内部元素将不会将焦点设置为可聚焦元素...
知道这是否是一个已知错误？
在IE11和Chrome上无法再现。
为了更好地理解这个问题，以下是一个例子：
/* this is just so that the squares are similarly displayed */
section {
position: relative;
display: inline-block;
margin-right: 75px;
}
div {
background-color: red;
width: 100px;
height: 100px;
color: white;
padding: 5px;
}
div:focus {
background-color: green;
}
div > span {
position: absolute;
display: inline-block;
top: 50px;
left: 50px;
background-color: blue;
width: 100px;
height: 100px;
padding: 5px;
}Context: an absolute element inside a focusable element.<br>
In Firefox 36, if the focusable element does not have a "position: relative", a click on the inside element will not set the focus on the focusable element...<br>
(red block turns green when focused)
<br><br>
Edit: none works in IE
<br><br>
<section>
<div style="position: relative;" tabindex="-1">
With position: relative
<span>
click here
</span>
</div>
</section>
<section>
<div tabindex="-1">
With no position
<span>
click here
</span>
</div>
</section>
答案 0 :(得分：1)
在这种情况下，会触发click事件并发生事件传播。因此，单击inside元素将传播到父元素，父元素将获得焦点并将应用样式。有关详细信息，请参阅事件传播event propagation
答案 1 :(得分：0)
我遇到了同样的问题并改为使用mousedown事件解决了。
答案 2 :(得分：-1)
在以下情况下，它可在所有浏览器中重现：
<!doctype html>
<html lang="en">
<head>
<title>Focus</title>
<style>
button { display: inline-block; width: 30px; height: 30px; background-color: red; }
button:focus { background-color:green; }
span { position: absolute; display:inline-block; width:100px }
</style>
</head>
<body>
<button>
<span tabindex="1">
click here
</span>
</button>
</body>
</html>
由于以下原因，tabindex无法保证添加focus：
由于其tabindex属性而仅可聚焦的元素将触发单击事件以响应非鼠标激活
辅助功能指南描述了解决方法：
提供脚本访问的技术包括：
允许用户配置用户代理，以便鼠标悬停/鼠标移除事件处理程序由（并激活）焦点/模糊事件激活。同样，允许用户使用键命令（例如
enter和Shift-Enter）来发起onclick和ondblclick事件。实施＆＃34;文档对象模型（DOM）2级事件规范＆＃34;具有单个激活事件的[DOM2EVENTS]事件，并提供使用每个受支持的输入设备或输入API触发该事件的方法。这些应该与上面提供的单击事件和映射相同（但请注意，也是编辑器的用户代理可能希望使用单击事件来移动系统插入符，并希望提供不同的行为以使用鼠标激活）。
例如，Amaya [AMAYA]使用
doAction命令激活链接和表单元素，可以通过鼠标激活（并且可以将其设置为单击或双击）或者通过键盘（可以使用Amaya的键盘配置为任何键设置）对于作者：记录已知重要脚本的效果，以便用户提前了解他们的工作。通过使用（标记语言）规范的相关元素或属性来实现，或者如果没有，请提供脚本行为的描述。
此外，此行为未指定：
：focus伪类适用于元素具有焦点（接受键盘事件或其他形式的文本输入）。
元素可以同时匹配多个伪类。
CSS没有定义哪些元素可能处于上述状态，或者如何输入和离开状态。
使用focusin / focusout polyfill来规范化跨浏览器行为：
function focusPolyfill()
{
'use strict';
var w = window,
d = w.document;
function addPolyfill(e)
{
var
type = e.type === 'focus' ? 'focusin' : 'focusout',
event = new CustomEvent(type, { bubbles:true, cancelable:false });
event.c1Generated = true;
e.target.dispatchEvent( event );
}
function removePolyfill(e)
{
if(!e.c1Generated)
{
// focus after focusin, so chrome will the first time trigger tow times focusin
d.removeEventListener('focus' ,addPolyfill ,true);
d.removeEventListener('blur' ,addPolyfill ,true);
d.removeEventListener('focusin' ,removePolyfill ,true);
d.removeEventListener('focusout' ,removePolyfill ,true);
}
}
function removeHandler()
{
d.removeEventListener('focusin' ,removePolyfill ,true);
d.removeEventListener('focusout' ,removePolyfill ,true);
}
if( w.onfocusin === undefined )
{
d.addEventListener('focus' ,addPolyfill ,true);
d.addEventListener('blur' ,addPolyfill ,true);
d.addEventListener('focusin' ,removePolyfill ,true);
d.addEventListener('focusout' ,removePolyfill ,true);
}
w.setTimeout(removeHandler);
}
以下是焦点在元素之间切换时的典型事件序列，包括不推荐使用的DOMFocusIn和DOMFocusOut事件。显示的顺序假定最初没有元素聚焦。
User shifts focus 1. focusin Sent before first target element receives focus 2. focus Sent after first target element receives focus 3. DOMFocusIn If supported User shifts focus 4. focusout Sent before first target element loses focus 5. focusin Sent before second target element receives focus 6. blur Sent after first target element loses focus 7. DOMFocusOut If supported 8. focus Sent after second target element receives focus 9. DOMFocusIn If supported
<强>参考
答案 3 :(得分：-1)
尝试使用<p>标记及其工作。
div > p{
display: inline-block;
top: 50px;
left: 50px;
background-color: blue;
width: 100px;
height: 100px;
padding: 5px;
margin-left:40px;
}
<section>
<div tabindex="-1">
With no position
<p>
click here
</p>
</div>
</section>