扩展时带有圆角和插入边框的Div

时间:2012-06-16 14:38:45

标签: css css3 safari webkit

这在Firefox中似乎不是问题。但在Safari中很明显

我有一个带圆角的div,一个插入边框和一个指定的宽度。您可以在http://jsfiddle.net/jsoningram/fek5n/

看到它

你会注意到左边中间的div打破了。实际上它并没有打破,但似乎。如果我将.beveled类中的边框颜色更改为黑色,则可见。我也可以删除边框样式,并返回“缺失的链接”。

html:

<div id="sub_nav" class="rounded_10 beveled">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

css:

#sub_nav {
    position: relative;
    background: #e6e6e6;
    width: 164px;
    min-height: 300px;
    float: left;
    padding: 0px 0px 27px 0px;
    z-index: 5;
    margin: 10px 0 0 10px;
}

#sub_nav li {
    position: relative;
    height: 50px;
    width: 160px;
    background: #ccc;
    margin: 0px 0px 1px 1px;
}

#sub_nav li:first-child {
    margin-top: 27px;
}

    .rounded_10 {
    -webkit-broder-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior:url(_/inc/PIE.htc);
}

    .beveled {
    border: 1px solid #fbfbfb;
    border-style: inset;
}

提前致谢...

3 个答案:

答案 0 :(得分:1)

这与border-style:inset如何工作以及边框和背景颜色彼此如此接近这一事实有关。

插图是一种三维风格效果,但是如果边框为1px,则很难弄清楚如何绘制效果。如果你改变了

.beveled {border: 30px solid red; border-style:inset;}

你会看到它正在努力实现的目标。它采用基色,然后使其变暗/变亮以产生效果。浅灰色对于其中的一部分变亮为白色。

因此,删除border-style:inset,然后更改边框颜色,您应该开始营业。

.beveled {border: 1px solid #ccc;}

答案 1 :(得分:0)

我做了一些实验,发现手动创建插入边框时会出现同样的问题,方法是设置每一边。

.beveled {
    border-top: 2px solid #aaa;
    border-left: 2px solid #aaa;
    border-right: 2px solid #efefef;
}'

我用最小的css创建了一个jsFiddle来显示这个问题。 http://jsfiddle.net/MdE7q/

它与宽高比有关。无法解释它,但将我的示例中的宽度更改为400px,差距消失。事实上,当宽度大于高度时,只有当高度大于宽度时,间隙才会出现。

此外,这在IE9 +中看起来很完美,这让我相信它是webkit和firefox中的渲染问题。

也许modernizr会在这里提供帮助。 http://modernizr.com/

答案 2 :(得分:0)

哇。这很奇怪。如果你使#sub_nav宽180px,那么它似乎可以修复它。 http://jsfiddle.net/fek5n/11/