内联图标链接在（某些）android 设备上有奇怪的行为

Question

所以这里有一个小 jsFiddle :

<html>
  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <style>
      .navButton {
        font-size:30px;
        height:43px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div style="display:inline-block">
      <a class="navButton" href="#"><i class="fa fa-camera"></i></a>
      <a class="navButton" href="#"><i class="fa fa-camera"></i></a>
      <a class="navButton" href="#"><i class="fa fa-camera"></i></a>
    </div>
    <div style="display:inline-block">
      <a class="navButton" href="#">Bla</a>
      <a class="navButton" href="#">Bla</a>
      <a class="navButton" href="#">Bla</a>
    </div>
  </body>
</html>

它几乎在任何地方都表现得非常好，但在我的 LG G2 和 Galaxy Note 2 手机的本机浏览器上（它在 Chrome 应用程序上运行良好），当我按下其中一个正确的摄像头时 links，它显示了一个白色的矩形，它覆盖了它左侧大约一半的图标，如下（我在这里触摸了右侧的摄像头）：

在 chrome://inspect 上调试此问题完全没有任何线索：当 link 为按下。检查时，显示显示元素中没有边距或填充着色。使用开发人员工具，在强制三种状态中的任何一种时都会生成这个白色矩形。 (:active, :hover, :focus)

这看起来像是……一个错误？即使是这样，知道如何使用相同类型的渲染来避免这种效果吗？

另外显然，它实际上并不是白色覆盖，这个缺陷只是覆盖了带有 "transparency" 的图标，如图所示 body 上有一个 background-color: red:

Answer 1

所以 this 是问题所在。正如该问题的答案所暗示的那样，我设法通过覆盖 css 中字体文件的顺序来解决我的问题，以便将 svg 文件放在前面：

@font-face {
  font-family:'FontAwesome';
  src:url('/font-awesome/fonts/fontawesome-webfont.eot');
  src:url('/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg'),url('/font-awesome/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),url('/font-awesome/fonts/fontawesome-webfont.woff2') format('woff2'),url('/font-awesome/fonts/fontawesome-webfont.woff') format('woff'),url('/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}

如果您确实覆盖了自定义 CSS 中的字体（并且没有修改原始的 Fontawesome CSS 文件，由于未来可能会更新框架，我认为这是不好的做法），使请务必更改文件路径以访问它们。

内联图标链接在（某些）android 设备上有奇怪的行为

Inlined icon links have weird behavior on (some) android devices

html

css

icons

android

font-awesome