Bootstrap 4表格窄行background-image不显示问题求助

最近在Bootstrap 4项目里踩了个坑：给表格整行（<tr>）设置小尺寸背景图后，宽度仅5%的单元格死活显示不出背景，把宽度调到6%以上就恢复正常了。折腾半天终于理清了原因，也找到了几个可行的解决办法，分享给大家：

问题根源 #

这其实是Chrome浏览器的一个渲染bug——当表格单元格宽度低于某个阈值（实测为5%）时，浏览器计算<tr>背景图的渲染区域出现异常，没有将背景图正确绘制到窄单元格内。我已经把这个问题提交给Chrome的bug追踪器，后续官方应该会修复。

解决方案 #

1. 临时快速修复：给<tr>添加边框 #

给目标<tr>元素加上border: solid;样式，能强制浏览器正确计算背景的渲染范围，瞬间解决问题。这个方法最简单，适合临时救急。

2. 优化背景图样式 #

调整自定义类.progress-bg里的background-size属性，替代原来的100% 100%，比如用cover或者具体像素值，确保背景图能适配窄单元格：

.progress-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAIAAADuA9qHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFwmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wNi0xOVQwOToyOTowOS0wNDowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wNi0xOVQwOToyOTowOS0wNDowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDYtMTlUMDk6Mjk6MDktMDQ6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YmVkMGY4ODEtZDI5ZS1jMzQ2LTg5OWMtYjI1YjQyMDI1ZDBlIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YjllYzJlZWEtZTJlOC1hMzQyLWE3MTAtMWM4Nzk1MjUxZjY4IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YTBmMGY4MDQtOGRmMC0yMTQ1LWI5ZjYtZGEyNzkxNDAyM2MwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YTBmMGY4MDQtOGRmMC0yMTQ1LWI5ZjYtZGEyNzkxNDAyM2MwIiBzdEV2dDp3aGVuPSIyMDE5LTA2LTE5VDA5OjI5OjA5LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiZWQwZjg4MS1kMjllLWMzNDYtODk5Yy1iMjViNDIwMjVkMGUiIHN0RXZ0OndoZW49IjIwMTktMDYtMTlUMDk6Mjk6MDktMDQ6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+MDui9AAAABVJREFUCJljfPv/NQNuwIRHjoGBAQCrIALb0W2etgAAAABJRU5ErkJggg==') !important;
  background-size: cover; /* 也可以设为具体像素，比如20px 100% */
  background-repeat: no-repeat;
}

3. 调整单元格宽度阈值 #

如果业务场景允许，把窄单元格的宽度设置为大于5%（比如6%），就能绕过这个浏览器渲染异常的问题，无需修改其他样式。

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