Chrome DevTools Inspector显示元素尺寸与width()返回值不符问题咨询

问题原因说明 #

你观察到的798.33px数值计算逻辑如下：

1. Chrome DevTools显示的是元素的总可视宽度，包含内容区、padding、border宽度
2. 你添加的padding-right:18px是固定值，剩余部分就是元素的精确内容区宽度：798.33px - 18px = 780.33px
3. 你用width()拿到的780是框架（jQuery等）对小数像素做默认取整后的结果，不是真实的精确内容宽度，你可以用原生API element.getBoundingClientRect().width 获取到精确的浮点数值验证。

内容宽度变化原因 #

你未添加padding时内容宽度为795.594px，添加padding后内容宽度被压缩，对应两种常见场景：

• 如果元素使用默认的box-sizing: content-box规则：说明元素父容器的最大可用宽度为798.33px，加了padding后内容区只能被挤压到780.33px才能适配父容器宽度
• 如果元素设置了box-sizing: border-box规则：说明你定义的元素总宽度为798.33px，加了padding后内容区会自动缩减为总宽度减去padding的数值

那0.33px的小数差值是Chrome亚像素渲染机制的正常表现：文本、行内元素的宽度计算受字体渲染、抗锯齿算法影响，会出现小于1px的精度偏差，属于浏览器正常行为，不需要额外处理。

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