1

我有一些 CSS 代码，以便在触摸智能手机屏幕的缩写和符号时显示标题属性。在我的样式表的“@media only screen and (max-width: 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 和三星浏览器上测试过——我的 iMac——在拉伸浏览器窗口的宽度后在 Chrome、Firefox、Safari 和 Opera 上测试过它，但它不起作用完全是iOS！添加 '-webkit-transform: translate3d (0,0,0);' 的技巧/解决方法 添加到代码中对此没有帮助。我应该非常感谢任何帮助！真的非常感谢！

解决了！

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

4

1 回答 1

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);
}
于 2017-07-05T20:55:54.780 回答