Google Chrome中Font Awesome输入框内图标定位异常问题

我帮你分析下这个Chrome特有的布局问题，顺便给出可行的修复方案：

问题根源 #

你的输入框用了flex: 1!important，但父容器.right-inner-addon默认没有设置display: flex。在Chrome的布局计算逻辑里，这种情况下绝对定位的图标会错误参考父容器的默认高度，加上输入框的width:100%和padding组合，就导致图标跑到了输入框下方。

修复方案 #

给.right-inner-addon添加flex布局，同时优化图标的垂直居中方式，确保在所有浏览器里表现一致：

修改后的完整代码 #

CSS部分

.SearchBox input { 
    flex: 1!important; 
    height: 35px!important; 
    margin: 0!important; 
    z-index: 100!important; 
    background: #fcfcfc!important; 
    border: 1px solid #cecece!important;
    border-top-color: #c4c4c4!important; /* 单独修改顶部边框颜色，简化代码 */
    font: inherit!important; 
    outline: none!important; 
    line-height: 1.2!important; 
    padding: 5px 36px 5px 12px!important; 
    width: 100%!important; 
    font-size: 15px!important; 
    transition: 0.15s ease-in!important; 
}
.right-inner-addon { 
    position: relative!important; 
    display: flex!important; /* 新增flex布局，让子元素对齐逻辑统一 */
}
.right-inner-addon input { 
    padding-right: 30px!important; 
}
.right-inner-addon i { 
    position: absolute!important; 
    right: 10px!important; /* 调整右侧内边距，让图标位置更合理 */
    top: 50%!important; 
    transform: translateY(-50%)!important; /* 精准垂直居中，比固定padding更可靠 */
    padding: 0!important; /* 移除多余padding避免干扰位置 */
    cursor: pointer!important; 
}
.fa-searchinfo { 
    color: #808287!important; 
    font-size: 11.5pt!important; 
}
.fa-searchinfo:hover { 
    color: #565859!important; 
    font-size: 11.5pt!important; 
}

HTML部分（无需修改，保持原结构即可）

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<div class="SearchBox">
<div class="right-inner-addon">
<input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder="enter ID" value="" />
<a title="Some detailed information about possible input formats." class="fa-searchinfo"><i class="fa fa-info-circle" ></i></a>
</div>
</div>

优化说明 #

• 给父容器加display:flex，让输入框的flex:1属性在Chrome里正确生效，统一布局逻辑
• 用top:50% + transform: translateY(-50%)实现精准垂直居中，避免不同浏览器的padding计算差异
• 简化了border属性的写法，让代码更整洁

修改后，信息图标应该能在Chrome里正确显示在输入框右侧内部，和Firefox、Safari的表现完全一致。

内容的提问来源于stack exchange，提问作者schustischuster