展开时带有圆角和插入边框的 Div答案

【问题标题】：Div with rounded corners and inset border breaks when expanding展开时带有圆角和插入边框的 Div
【发布时间】：2012-06-16 14:38:45
【问题描述】：

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

提前谢谢...

【问题讨论】：

标签： css safari webkit

【解决方案1】：

这与border-style:inset 的工作方式有关，以及边框和背景颜色如此接近的事实。

Inset 是一种 3-d 样式效果，但带有 1px 边框，很难弄清楚如何绘制效果。如果你改变了

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

你会看到它试图完成什么。它采用基色，然后使其变暗/变亮以产生效果。你浅灰色的一部分变浅为白色。

所以，去掉border-style:inset，然后改变边框颜色，你就应该做生意了。

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

【讨论】：

如果需要，也可以为边框的每一侧使用不同的颜色，以模拟斜面外观。
我不确定他的预期外观是什么，但是是的，有很多方法可以解决它。

【解决方案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/

【讨论】：

【解决方案3】：

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

【讨论】：