CSS：奇怪的边界

Question

我正在制作布局，现在我遇到了问题而且我不知道如何修复它：

CSS：

   #menu {
    background-color:#fff;
    width:100%;
    height:46px;
    margin-bottom: 25px;
}

#menu > ul {
    display:inline;
}

#menu > ul > li {
    float:left;
    list-style-type:none;
    width:134px;
    height:100%;
    border-bottom-color: #f9f7f7;
    border-bottom-style: solid;
    border-bottom-width: 6px;
    border-right-color: #f9f7f7;
    border-right-style: solid;
    border-right-width: 1px;
    display:table;
}

#menu > ul > li > a {
    text-align:center;
    width:auto;
    height:auto;
    margin:0 auto;
    display:block;
    margin-top:17px;
}

#menu > ul {
    width:0px;
    height:0px;
    margin:0;
    padding:0;
}

#selected {
    border-bottom-color: #9d1624 !IMPORTANT;
}

JSFiddle：http://jsfiddle.net/RuUkM/

我尝试过border-bottom-width：100px但是我得到一个红色的100px高度。

如何解决这个问题以及为什么会发生这种情况？

Answer 1

不，它完全没问题，问题是您有display:table，因此您需要为li添加border-collapse:collapse

Answer 2

您可以使用伪元素之前和之后实现该功能

#menu > ul > li:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 100%;
    background: red;
}

#menu > ul > li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background: blue;
    bottom: 0;
}

在这里演示：http://jsfiddle.net/RuUkM/5/

Answer 3

使用有角度的角生成CSS边框。当底部有彩色边框时，就像你一样，右边有一个不同颜色的边框，你会得到那个有角度的边缘。这是一个图表：

有些人利用这个来创建三角形。但是你的问题是一样的，只需删除右边框即可获得干净的边缘。

Answer 4

您遇到的问题是li，border-right正在干扰border-bottom。这就是为什么底部边框的一半向左移动“1px”的原因：

border-right-width: 1px;