jQuery读取SVG图标（<i>标签）尺寸时存在异常问题

问题现象 #

左侧为H3标题，右侧是绝对定位的包含SVG图标（通过<i>标签引入）的容器，多数场景下显示正常，但页面加载时偶尔出现布局错乱，浏览器窗口resize后可自动恢复正常。

排查过程 #

• 尝试在图标旁添加HTML硬编码空格，无效。
• 排查发现页面加载阶段jQuery读取的元素尺寸值异常，并非菜单实际宽度。
• 因项目需兼容IE8，采用jQuery实现相关布局逻辑。
• 为脚本添加200ms的setTimeout后，页面加载可快速恢复正常，推测问题与资源加载顺序相关；CSS及图标脚本已放置在<head>标签顶部、jQuery之前。
• 将<i>图标替换为纯文本填充<li>后，脚本运行正常，确定问题大概率与<i>标签的加载流程有关。
• 进一步验证发现：jQuery读取<i>元素宽度时，即便使用outerWidth(true)，仍可能获取不含内边距的错误宽度值。

解决方案 #

当图标尺寸相近时，最简单的解决方式是为<li>设置固定最小宽度，确保页面加载时jQuery能读取到符合预期的宽度值，避免布局错乱。

修正后的代码片段 #

JavaScript（修正选择器错误）

function h3_ellipsis(){
    // 修正选择器：添加.前缀指定class选择器
    var icon_w = $(".icons").outerWidth(true);
    var menu_w = $(".menu").outerWidth(true);
    
    $(".headline").css("padding-right", icon_w + 15);
}

// 页面加载完成后执行
$(window).on("load" ,function(){h3_ellipsis();});
// 窗口 resize 时重新计算
$(window).on('resize', function(){h3_ellipsis();});

CSS（为li添加最小宽度）

/* 精准指定目标div，避免影响其他元素 */
div.menu{height: 50px; width: 400px; border: 1px solid red; position: relative;}

h3.headline{line-height: 50px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; margin: 0;}

ul.icons{position: absolute; top: 0; right: 0; list-style: none; padding: 0; margin: 0;}

/* 添加最小宽度，根据图标实际尺寸调整数值 */
li{line-height: 50px; float: left; margin: 0 0 0 5px; min-width: 30px; text-align: center;}

HTML（无需修改）

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="menu">
    <h3 class="headline">HeadlineHeadlineHeadlineHeadlineHeadlineHeadlineHeadlineHeadlineHeadline</h3>
    
    <ul class="icons">
      <li><a href="#"><i class="fa fa-water"></i></a></li>
      <li><a href="#"><i class="fa fa-water"></i></a></li>
    </ul>
</div>

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