iOS Safari 在背景图像上添加了额外的边框答案

【问题标题】：iOS Safari Adds Additional Border On Background ImageiOS Safari 在背景图像上添加了额外的边框
【发布时间】：2018-06-26 23:39:02
【问题描述】：

HTML 代码

<div class="pageHeader">
<span class="coolStyleUnderline">Change Password</span>
</div>

CSS 代码

.pageHeader {
   text-align: center;
   color: #750000;
   font-family: "MedievalSharp";
   font-weight: bold;
   font-size: 60px;
}
.coolStyleUnderline {
   background: -webkit-linear-gradient(black, #750000);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   border-image: linear-gradient(to right, black, #750000);
   border-image: -webkit-linear-gradient(right, #750000, black);
   border-image-slice: 1;
   display: inline-block;
   line-height: .9;
   border-bottom: 6px solid #750000;
}

我尝试过的事情

将填充设置为 0
将外观（包括 webkit 等）设置为“无”
将行高设置为 1
在border-bottom 属性之前将边框设置为无

有问题的设备

iPad Pro 12.9 英寸（Safari 和 Chrome）
iPhone X（Safari 和 Chrome）
iPhone 6s（Safari 和 Chrome）

我附上了两张照片。第一个是边框应该看起来的样子（在 Windows Chrome 上拍摄），第二个是我在苹果设备上得到的。任何帮助深表感谢。谢谢！

No Issue Photo

Issue Photo

【问题讨论】：

标签： html ios css google-chrome safari

【解决方案1】：

我想通了，男孩们。我所要做的就是指定边框图像宽度。这是通过将以下内容添加到 .coolStyleUnderline 来完成的：

border-image-width: 0px 0px 6px 0px;

感谢所有尝试过的人！祝你有美好的一天！

【讨论】：