0

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

​</p>

的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;
}

在此先感谢...​</p>

4

3 回答 3

1

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

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

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

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

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

.beveled {border: 1px solid #ccc;}
于 2012-06-16T15:06:03.670 回答
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/

于 2012-06-16T15:10:43.403 回答
0

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

于 2012-06-16T15:25:33.650 回答