在Safari中边界半径超过965像素的杂乱垂直线 [英] Stray vertical line above 965 pixels with border radius in Safari

问题描述

我注意到，如果我有一个宽度大于965像素和边界半径小于所有4个角的div，在div中有一个杂散的垂直线。这里有一个jsFiddle链接... http://jsfiddle.net/Z3vFp/4/ 。注意，这只发生在Safari。有什么想法吗？还要注意，965像素的阈值可能在jsFiddle有点不同。

I've noticed that if I have a div with a width greater than 965 pixels and a border radius on less than all 4 corners, there is a stray vertical line in the div. Here's a jsFiddle link... http://jsfiddle.net/Z3vFp/4/. Notice that this only occurs in Safari. Any thoughts? Also note that the 965 pixel threshold may be a little different in jsFiddle.

编辑：我在MacBook Pro与Retina显示。我想这是一个rMBP的东西？

I'm on a Macbook Pro with Retina display. I guess it's an rMBP thing?

编辑2：这里是一个jsFiddle screencap。 http://i.imgur.com/0rqSS.png

EDIT 2: Here's a jsFiddle screencap. http://i.imgur.com/0rqSS.png

推荐答案

添加 -webkit-background-clip：padding-box;

.foo {
    width: 966px;
    height: 50px;
    background-color: lightgray;
    padding: 25px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    -webkit-background-clip: padding-box;
}​

这篇关于在Safari中边界半径超过965像素的杂乱垂直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！