Question

这在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;
}

提前致谢...

Answer 1

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

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

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

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

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

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

Answer 2

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

.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/

Answer 3

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

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

3 个答案: