我已经修改了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;
}
默认
状态上放置一个透明的边框,或者使用与它所在的背景相同的颜色,即:
a {
border-bottom: 2px solid #222
}
a:hover {
border-bottom: 2px solid red;
}
正确。这是因为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;
}