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

这是一个很小的例子：

它几乎在任何地方都可以正常工作，但在我的LG G2和Galaxy Note 2手机的本机浏览器上，它在Chrome应用程序上运行良好。当我按下右侧摄像头的一个链接时，它会显示一个白色矩形，覆盖左侧图标的一半，如下所示，我在右侧摄像头上触摸过：

在上调试此问题chrome://inspect 完全没有显示任何线索：当按下链接时，任何元素的CSS属性都不会改变。检查时，显示屏上的元素没有边距或填充颜色。使用开发人员工具，强制三种状态中的任何一种时，会生成此白色矩形：活动，：悬停，：聚焦

这看起来像。。。虫子？即使是这样，你知道我如何用同样的渲染来避免这种效果吗

同样明显的是，它实际上不是白色覆盖，这个缺陷只是覆盖了透明的图标，如下图所示，背景颜色为：主体上的红色：

问题也是如此。正如对该问题的回答所表明的，我通过覆盖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文件，我认为这是一种不好的做法，因为将来可能会更新框架，请确保更改文件路径以到达它们。

您需要定义一个固定的宽度，但仍然有这些白色方块覆盖其他图标，即使我触摸了下一部分的文本链接，但效果很好。此外，即使不使用i，也会发生这种情况，如图所示，您是否尝试过使用内联块或块样式的跨度？对不起，我有一个HTC，它看起来很好，所以我不能复制它。不用担心，你的建议非常感谢：我尝试了你所做的，我用了spans而不是I，spans而不是DIV，以防万一，仍然会出现白色的东西。我应该检查一下它到底是不是白色的。让我用一个红色的背景来尝试一下，也可以在focus:a:focus{width:43px；…experiment with stuff}上调整锚css

@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;
}