在Android上只有CSS模式窗口OK，在iOS上不起作用

Question

我有一些CSS代码，以便在触摸智能手机屏幕的缩写和符号时显示title属性。在我的样式表的"仅@media屏幕和(最大宽度：767px)"部分中，我有以下代码：

span[title]:active::after,abbr:active::after {
color: Maroon;
font-weight: bold;
content: 'Meaning: ' attr(title);
position: fixed;
top: 3ex;
left: 2ex;
display: block;
z-index: 100;
background-color: White;
box-shadow: .3ex .3ex .1ex Grey;
border: 1px solid grey;
padding: .4ex;
width: 70%;
height: auto;
}

它在Android上确实完美运行 - 我已经在Chrome，Firefox和Samsung浏览器上测试过它 - 我的iMac - 在拉伸浏览器窗口的宽度后在Chrome，Firefox，Safari和Opera上对其进行了测试，但它根本不适用于iOS！添加到代码中添加"-webkit-transform： translate3d (0,0,0);"的技巧/解决方法对此没有帮助。 我应该非常感谢任何帮助！ 真的非常感谢！

解决！

我尝试了以下链接中提出的解决方案：在移动 Safari 中启用 CSS 活动伪样式 它工作正常。问题是Safari Mobile默认禁用：active伪类，这个简单的想法解决了它。 我尝试了一些其他有效的解决方案，例如"body ontouchstart=""和类似的解决方案，但是在根据W3C验证器检查代码时，所有这些解决方案都给出了错误。 非常感谢所有回答并试图提供帮助的人！

Answer 1

:active属性仅适用于 activabe 元素。文档 说：

可能存在文档语言或实现特定的限制，这些限制元素可以变得:active或获取:focus。

因此，最简单的方法是将要激活的每个元素的tabindex属性设置为0。

这有一个很大的优势，即您的代码将与键盘一起使用。

编辑：为所有元素添加tabindex=-1可以使用jQuery轻松完成

$("abbr[title]").attr("tabindex", -1);

或使用标准JavaScript

var ele=document.querySelectorAll("abbr[title]");
for (var i=0;i<ele.length;i++) {
ele[i].setAttribute("tabindex", -1);
}