css – 在Safari中正确舍入的边框图像舍入

前端之家收集整理的这篇文章主要介绍了css – 在Safari中正确舍入的边框图像舍入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的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)

解决方法

这似乎是一个Safari bug. It does the same thing here,即使有他们的样本图像. 看来获得一致结果的唯一方法是使用固定宽度的Safari …
原文链接:https://www.f2er.com/css/215845.html

猜你在找的CSS相关文章