边框底部1px两侧CSS太长

Question

我在做什么： 在悬停按钮时，我添加了5px的边框底部。

JS FIDDLE： http://jsfiddle.net/mUCNB/

问题：

问题是边框底部在左侧和右侧都延伸了1px。

问题：

有谁知道如何解决这个问题？

相关代码：

#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
border-right: 1px solid #ffffff;
}

#main-nav li a:nth-child(3) {
width: 225px;
}

#main-nav li a:last-child {
width: 224px;
border-left: 1px solid #ffffff;
}

#main-nav  a:hover {
height: 30px;
border-bottom: 5px solid #0BC6F5;
}

Answer 1

由于边缘处的CSS边界“斜接”，你会注意到这种现象。要解决此问题，我已创建规则以突出显示悬停时li的{​​{1}}。这会产生一种效果，即您在底部获得了一个干净的边框。您也可以在元素之间保留这些白色分隔符。

Forked Fiddle

CSS

a

希望有所帮助。

Answer 2

您可以通过从以下内容中删除border-left和border-right样式来解决此问题：

更新了css：

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}

#main-nav li a:last-child {
width: 224px;
}

updated fiddle

Answer 3

另外一个巧妙的技巧就是使用box-shadow来应用冲突的边界：

#main-nav  a:hover {
height: 30px;
box-shadow:0 5px 0 -1px #0BC6F5;
}

如果您只是更换当前的悬停选择器，这是有效的！

如果你想先试试，这是另一个小提琴： http://jsfiddle.net/4zzMA/