仅CSS模式窗口在Android上正常，在iOS上不工作

我有一些CSS代码，以便在触摸智能手机屏幕的缩写和符号时显示title属性。在我的样式表的“@media only screen and（max width:767px）”部分中，我有以下代码：

span[title]：活动：：after，缩写：活动：：after{
颜色：栗色；
字体大小：粗体；
内容：'含义：'属性（标题）；
位置：固定；
top:3ex；
左：2ex；
显示：块；
z指数：100；
背景色：白色；
盒影：3ex.3ex.1ex灰色；
边框：1px纯灰；
填充：.4ex；
宽度：70%；
高度：自动；
}

属性

：active

仅对activabe元素有效

可能存在特定于文档语言或实现的限制，在这些限制下，元素可以成为

：活动的
或获取
：焦点

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

这有一个很大的优点，就是你的代码可以和键盘一起工作

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

$("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);
}

var ele=document.queryselectoral（“缩写[标题]”）；
对于（var i=0；我尝试使用safari和开发工具在mac上进行调试。连接您的iphone并试用。我猜您可能缺少一些其他供应商前缀。根据我的经验，我可以说safari喜欢很棘手。谢谢您，El Danielo。我目前没有iphone，然后我必须等待我女儿来测试您的建议。我不会在Safari for Mac中，使用Web Inspector并选择“Safari-iOS 10-iPhone”，告诉您是否有任何进展作为用户代理，我的CSS工作完美无瑕。正在使用真正的iPhone进行调试…谢谢你的回答，Adam。我将尝试猜测为什么Safari for iOS上的实现拒绝将abbr作为可激活元素。你提出的解决方案-tabbindexing to 0-无法在我的网站上完成，因为它有太多缩写和符号-它是一个medic所有的网站，许多页面上的一些缩写和符号，以及表单页面上的一些缩写和符号已经在使用tabindex，所有这些都适用于整个网站中的800多个页面。我需要一些可以在CSS中工作的东西，不能修改这么多东西。再次感谢你，Adam。这个动态解决方案要求每个页面声明一个nd load jQuery，我认为。使用标准javascript（请参阅新编辑的答案）可以轻松完成。我会尝试一下，然后告诉您结果。我也会尝试将此应用于带span[title]的符号。非常感谢。刚刚测试过。添加tabindex=“-1”至少对iPhone5c没有任何影响。非常感谢您对帮助我的兴趣。