jlo*_*wcs 11 css firefox position focus css-position
上下文:可聚焦元素内的绝对元素.
在Firefox 36中,如果可聚焦元素没有CSS位置(相对,固定或绝对),则单击内部元素将不会将焦点设置为可聚焦元素...
不知道那是不是已知的bug？
在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>Pau*_*tte -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。使用单个激活事件实现“文档对象模型 (DOM) 2 级事件规范”[DOM2EVENTS] 事件，并提供使用每个受支持的输入设备或输入 API 触发该事件的方法。这些应该与上面提供的单击事件和映射相同（但请注意，同时也是编辑器的用户代理可能希望使用单击事件来移动系统插入符，并希望提供不同的行为来使用鼠标激活）。
例如，Amaya [AMAYA]使用
doAction激活链接和表单元素的命令，可以通过鼠标（可以将其设置为单击或双击）或键盘（可以设置为单击或双击）来激活该命令使用 Amaya 的键盘配置将其设置为任何键）对于作者：记录已知重要脚本的效果，以便用户提前了解他们所做的事情。通过使用（标记语言）规范的相关元素或属性来执行此操作，或者如果没有，则提供脚本行为的描述。
此外，此行为未指定：
:focus 伪类在元素具有焦点时应用（接受键盘事件或其他形式的文本输入）。
一个元素可以同时匹配多个伪类。
CSS 没有定义哪些元素可能处于上述状态，或者如何进入和离开这些状态。
使用 focusin/focusout polyfill 来标准化跨浏览器行为：
<!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>
以下是焦点在元素之间转移时的典型事件序列，包括已弃用的 DOMFocusIn 和 DOMFocusOut 事件。显示的顺序假定最初没有聚焦任何元素。
用户转移焦点 1. focusin 在第一个目标元素获得焦点之前发送 2. focus 在第一个目标元素获得焦点后发送 3. DOMFocusIn 如果支持 用户转移焦点 4. focusout 在第一个目标元素失去焦点之前发送 5. focusin 在第二个目标元素获得焦点之前发送 6.blur 在第一个目标元素失去焦点后发送 7. DOMFocusOut 如果支持 8. focus 在第二个目标元素获得焦点后发送 9. DOMFocusIn 如果支持
参考
| 归档时间： |
|
| 查看次数： |
1619 次 |
| 最近记录： |