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应用程序上工作正常），当我按下其中一个正确的相机链接时，它会显示一个白色矩形覆盖左侧图标的大约一半，如下所示（这里我触摸了右侧相机）：

enter image description here

在chrome：// inspect上调试此问题绝对没有任何线索：按下链接时，任何元素的单个CSS属性都不会更改。检查时，显示屏显示元素中没有边距或填充颜色。使用开发人员工具，强制执行这三种状态中的任何一种时都会生成此白色矩形。（：active，：hover，：focus）

这看起来像......一个错误？即使如此，任何想法如何用同样的渲染来避免这种效果？

同样显然，它实际上不是白色叠加，这个缺陷只包含具有“透明度”的图标，如图中所示，身体上有background-color: red：

enter image description here

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设备上有奇怪的行为

1 个答案: