Css 引导程序3：导航栏链接悬停效果与边界问题

我使用以下CSS为导航栏中的少数链接创建简单的悬停效果：

#k9nav-inner ul li:hover {
    background-color: black;
    border-bottom: 2px solid red;
}

---

它可以工作，但底部的边框将导航栏的整个底部推到2px（换句话说，在悬停期间导航栏的高度将增加2px），从而在鼠标移动到链接上方/下方时产生明显的弹出效果。我知道长方体模型会出现这种情况，但有没有办法抵消这种情况，使2px边框出现，但不会将导航栏拉伸相同的2px？

这将阻止这种情况的发生

#k9nav-inner ul li:hover {
    box-shadow: 0 0 0 2px red inset;
}

这不是正式的边界，但它看起来完全像一个，不会弄乱盒子模型的大小

编辑：

仅对于底部边框，这将起作用

#k9nav-inner ul li:hover {
    box-shadow: 0 2px red;
}

---

例如fiddle

您可以将透明边框设置为

#k9nav inner ul li

，或者（在我看来这更合适）设置父背景色

例如：

HTML:

正确的工作示例是.sd2和.sd3。正如你所看到的，它们并不理想，但对我来说效果很好

---

参见JSFIDLE上的工作示例：

在某些情况下，利用

大纲

而不是

边框

会很有用。大纲不会增加父容器的大小。但是，我不认为可以在单面设置大纲（例如，大纲底部）

轮廓：2倍纯红

如果在列表元素未悬停时使用容器的边框背景色将2px边框添加到列表元素中，则在悬停时不会看到2px移位

#k9nav-inner ul li {
    border-bottom: 2px solid white;
}

我想出来了：

#k9nav-inner ul li:hover a {
    box-shadow: 0 -2px red inset;
}

它在整个
li
周围给了我一个2倍的红色边框。另一个问题是，CSS规则对较旧的浏览器（如IE 6-8）的转换效果如何？我想要的只是底部边框效果。到目前为止，我在所有4条边上都得到了一个边界，不管我的目标是
还是嵌套在里面的
。在Chrome上进行测试，如果有必要的话。
#k9nav-inner ul li {
    border-bottom: 2px solid white;
}

#k9nav-inner ul li:hover a {
    box-shadow: 0 -2px red inset;
}