0

我在 html 和 css 中修改了导航栏。在栏中有指向其他页面的链接，我希望当我用鼠标浏览它们时，导航栏中专用于链接的 div 会用中等红色边框改变颜色，问题是当我浏览链接时有边框导航栏变宽了。

 #access {
       background: #222; /* Show a solid color for older browsers */
       background: -moz-linear-gradient(#252525, #0a0a0a);
       background: -o-linear-gradient(#252525, #0a0a0a);
       background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
       background: -webkit-linear-gradient(#252525, #0a0a0a);
       -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
       -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
       box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
       clear: both;
       display: block;
       margin: 0 auto 6px;
       width: 100%;
       text-align: center;
       line-height: 0;
}
#access ul {
    font-size: 13.5px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    display:inline-block;
}
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
        background: #efefef;
        border-bottom-style:solid;
        border-width:5px;
        border-color:red;
    }
4

2 回答 2

3

在默认状态下放置一个透明边框，或者使用与它所在的背景相同的颜色，即：

a {
  border-bottom: 2px solid #222
}
a:hover {
  border-bottom: 2px solid red;
}
于 2013-11-01T15:20:51.690 回答
1

正确的。这是因为 CSS 基于盒子模型，其中对象的总可见宽度实际上是：

visible width = width + padding + border

box-sizing是 CSS 规范的新内容，但具有良好的浏览器支持（尽管带有供应商前缀）。这基本上使总可见宽度=宽度。边框、内边距等都从宽度上拿走了！

visible width = width

阅读本文了解更多信息：http ://css-tricks.com/box-sizing/

演示

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

注意宽度的明显差异。

HTML

<div class="default"></div>
<div class="box-sized"></div>

CSS

div {
    width: 300px;
    height: 100px;
    background-color: lime;
    margin: 10px;
}
.default {
    border: 10px solid red;
}
.box-sized {
    border: 10px solid red;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
于 2013-11-01T15:27:38.080 回答