边界图像舍入在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/safari/documentation/ appleapplications/reference/safaricssref/articles/standardcssproperties.html)

Answer 1

试试这个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; 
    }