边界图像舍入在Safari中没有正确舍入

Question

这是我的jsfiddle：http://jsfiddle.net/9TWHF/1/

#bigdescription{
    width: 66%;
    border-style: solid;
    border-width: 87px 78px 81px 79px; 
    -moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 round; 
    -webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 round;
    -o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 round; 
    border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 fill round; 
}

火狐：

苹果浏览器：

您可以在底部边框上看到它。在Safari的每个浏览器中，底部边框正确舍入。在Safari中，它似乎根本不是四舍五入的。任何想法为什么会发生？

编辑：据我所知，Safari实际上并不支持边框图像上的“圆形”重复样式（即使他们的文档说他们做https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html）

Answer 1

这似乎是一个Safari bug。 It does the same thing here，即使有他们的样本图像。看来获得一致结果的唯一方法是使用固定宽度的Safari ...

Answer 2

这是我能让它看起来正确和平滑的最接近的。

#bigdescription{
width: 353px;
border-style: solid;
border-width: 87px 64px 76px 89px; 
-webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round; 
   -moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round; 
     -o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round; 
        border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round;
}

我更改了一些宽度：和边框圆属性

Answer 3

添加到@ Piyush-Marvaniya的答案

这似乎是由于与百分比宽度相关的像素舍入误差。固定时，您可以获得与其他浏览器类似的边框。

这是Saf v5.0（7533.16）/在jsfiddle获胜的工作示例。我已经能够使它接近完美，边框的下曲线有一个像素毛刺，但你必须仔细观察才能实现它：

#bigdescription {
    width: 350px;
    border-style: solid;
    border-width: 87px 69px 76px 89px; 
    -webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round; 
       -moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round; 
         -o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round; 
            border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round;
}

Answer 4

试试这个css

#bigdescription{
        width: 66%;
        border-style: solid;
        border-width: 87px 69px 77px 89px; 
        -moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 round; 
        -webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 round; 
        -o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 round; 
        border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 fill round; 
    }