html li 触摸时不需要的背景答案

【问题标题】：html li unwanted background on touchhtml li 触摸时不需要的背景
【发布时间】：2016-03-13 04:47:23
【问题描述】：

我目前在一个网站上工作，我遇到了列表项的奇怪行为。只要我在 ul 元素中触摸 li 元素，列表项就会获得背景（iOS saferi lightgrey 和 android chrome 某种蓝色）。看看这个：

看起来是这样的

(第二项“林涅42”)

我尝试了以下 css 样式来删除它：

li, li:hover, li:active, li:focus {
  background-color: transparent;
  outline: none;
}

不过好像和这些css属性没什么关系。

这也只发生在移动浏览器上。我在 Chrome for Windows / OS X 上的 Safari 上没有这个。

有什么想法吗？

【问题讨论】：

你试过background:none!important!吗？
是的，但这也不起作用。它还说背景颜色“不匹配的属性值”。但这也不适用于背景
试试chrome://inspect/#devices
为 iOS 和 Mac 上的 safari 做了这个，但我没有找到任何问题的迹象。另外我认为如果我为 iOS Safari 修复它，它也会为 Android 上的 chrome 修复它
你试过这个吗？ ::选择{颜色：红色；背景：黄色； }

【解决方案1】：

也许您需要覆盖-webkit-touch-callout，因为当在 iPhone OS 上触摸并按住目标时，Safari 会显示有关该链接的标注信息。此属性允许禁用该行为。

试试这个css属性：

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
  -webkit-touch-callout: none!important;
  -webkit-user-select: none!important;
}

【讨论】：