不同浏览器下border-image slice渲染差异及适配方案咨询

差异产生原因 #

• 内核规则限制：iOS端所有第三方浏览器（包括标称Chrome、Firefox的产品）都受苹果生态规则限制，必须使用WebKit内核渲染，表现和同版本Safari完全一致，不存在独立的渲染逻辑。
• 规范实现偏差：你提到的旧版Safari（12.x版本）、iOS14及更早版本搭载的WebKit内核，对border-image-repeat属性的repeat、round、space三个取值的实现不符合W3C规范：当切片尺寸和边框尺寸不严格匹配时，WebKit会错误拉伸切片填充区域，而Blink（Chrome）、Gecko（Firefox）内核会按照规范优先保证切片原始比例，仅裁剪多余部分或调整重复间距。
• 缺省值差异：如果不显式声明全部border-image相关属性，WebKit内核的缺省属性补全逻辑和其他内核不同，会额外增加拉伸适配逻辑。

适配方案 #

方案1：规范border-image属性声明（优先选择） #

按照以下规则书写代码即可覆盖90%以上的兼容问题，无需额外hack：

1. 必须显式声明border的基础样式，border-width要和border-image-slice的切片数值完全匹配，不要省略border-style: solid
2. 完整声明所有border-image子属性，不要依赖浏览器缺省补全
3. 需要填充边框内部区域时，必须显式给border-image-slice添加fill关键字

示例代码：

.target-element {
  /* 基础边框设置，20px对应切片尺寸 */
  border: 20px solid transparent;
  /* 完整声明所有border-image属性 */
  border-image-source: url(你的边框图片路径);
  border-image-slice: 20 fill; /* 20和border-width对应，需要填充内容区加fill */
  border-image-width: 20px;
  border-image-outset: 0;
  /* 显式指定重复模式：repeat为平铺不拉伸（边缘可能裁剪），round为轻微拉伸保证完整不裁剪 */
  border-image-repeat: repeat;
}

方案2：多重背景模拟边框（兼容性最好，完全消除差异） #

如果旧版Safari仍存在异常，可以改用多重背景图实现边框效果，所有浏览器表现100%一致：

.target-element {
  /* padding值对应边框宽度，避免内容压住边框 */
  padding: 20px;
  background: 
    /* 四个角，按顺序声明 */
    url(左上角图路径) top left no-repeat,
    url(右上角图路径) top right no-repeat,
    url(左下角图路径) bottom left no-repeat,
    url(右下角图路径) bottom right no-repeat,
    /* 四个边，按重复方向声明 */
    url(上边框图路径) top left repeat-x,
    url(下边框图路径) bottom left repeat-x,
    url(左边框图路径) top left repeat-y,
    url(右边框图路径) top right repeat-y,
    /* 内容区背景色 */
    #ffffff;
  /* 按顺序指定每个背景层的尺寸，四个角尺寸为20*20，上下边高度20，左右边宽度20 */
  background-size: 
    20px 20px, 20px 20px, 20px 20px, 20px 20px,
    auto 20px, auto 20px, 20px auto, 20px auto,
    100% 100%;
}

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