谷歌浏览器未将content属性为<content-replacement>的伪元素按替换元素渲染如何解决？

• 经实际测试验证，Chrome浏览器存在不符合W3C渲染规范的行为：不会将content属性值类型为<content-replacement>的伪元素作为替换元素进行渲染。
• 规范要求：当伪元素的content属性取值为<content-replacement>类型时，该伪元素应当被识别为替换元素，设置的width、height等盒模型属性应当正常生效。
• 你可以使用以下极简代码自行复现该问题：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Chrome伪元素渲染测试</title>
  <style>
    .test-box::before {
      /* content取值为url()属于<content-replacement>类型 */
      content: url("替换为你本地的测试图片路径");
      width: 100px;
      height: 100px;
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <div class="test-box"></div>
</body>
</html>

• 实际复现现象：Chrome浏览器下，上述代码中伪元素设置的width和height不会生效，元素尺寸会完全跟随引入的图片原始尺寸，符合非替换元素的渲染表现，和规范要求不符。

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