gpt4 book ai didi

android - 内联图标链接在(某些)Android 设备上有奇怪的行为

转载 作者:行者123 更新时间:2023-11-28 08:21:22 25 4
gpt4 key购买 nike

所以这是一个很小的 ​​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 手机的 native 浏览器上(它在 Chrome 应用程序上运行良好),当我按下其中一个正确的相机链接时,它会显示一个白色矩形,其中覆盖了它左侧图标的一半左右,如下(这里我在右边的摄像头上摸了一下):

enter image description here

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

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

另外,显然,它实际上并不是白色覆盖层,这个缺陷只是覆盖了具有“透明度”的图标,如图所示,主体上有一个 background-color: red:

enter image description here

最佳答案

所以 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 文件,由于 future 可能会更新框架,我认为这是不好的做法),请确保更改文件路径以访问它们。

关于android - 内联图标链接在(某些)Android 设备上有奇怪的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28747839/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com