现代浏览器文字超出容器宽度问题求助：以“84”为例

嘿，我来帮你拆解下这个问题——你看到的“84”超出边界，主要是这几个因素在搞鬼：

1. 文本阴影的视觉溢出 #

你给文字加了四个方向的1px偏移阴影，要知道text-shadow是绘制在元素布局盒之外的：浏览器计算元素宽度时只会统计文字本身的宽度，但阴影会向外延伸，视觉上就会让“带阴影的文字”看起来超出了容器边界。比如原本“84”的宽度刚好贴合容器，加上左右各1px的阴影，阴影部分自然就跑到容器外面去了。

2. 小字号下的字体渲染误差 #

你用了font-size: 8px这种极小字号，Arial字体里的“8”和“4”在这个尺寸下，实际渲染的宽度可能和浏览器计算的理论宽度有细微偏差，再叠加阴影的效果，这种溢出的视觉感受会被放大。

3. 绝对定位的宽度计算逻辑 #

因为你给span设置了position: absolute，如果没明确指定宽度，元素的宽度完全由内容本身决定，但阴影不会被计入元素的布局宽度。如果容器（这个span的父元素）的宽度刚好等于文字的布局宽度，阴影自然就会超出容器范围。

试试这几个解决办法： #

• 添加内边距：给.test加上padding: 0 2px;，给左右阴影留出足够空间，视觉上就不会溢出了。
• 调整阴影偏移量：把阴影的1px改成0.5px（比如text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;），缩小阴影的延伸范围，注意部分旧浏览器可能不支持小数像素偏移。
• 设置明确宽度：给.test加上width: 18px;（具体数值可根据实际渲染效果调整），配合text-align: right，让文字和阴影都能容纳在元素盒内。

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