当我将鼠标悬停在链接上时，链接会轻微移动。我怎么解决这个问题。不使用 box-sizing 属性不就解决了吗？
这是我的标记。
<body>
<div id="wrapper">
<nav class="paging">
<ul>
<li class="first"><a href="#">first</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><strong>3</strong></li>
<li><a href="#">4</a></li>
<li><span>...</span></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="last"><a href="#">last</a></li>
</ul>
</nav>
</div>
这是标记的样式。
body{
margin:0;
color:#333;
font:14px/18px Arial, Helvetica, sans-serif;
background:#fff;
}
a{color:#3c8fdc;}
#wrapper{
width:600px;
margin:0 auto;
padding:45px 0 0;
}
.paging ul{
padding:0;
margin:0;
list-style:none;
overflow:hidden;
}
.paging li{
float:left;
text-align:center;
margin:0 4px 0 0;
}
.paging .first a,
.paging .last a{
text-align:left;
width:auto;
margin:0 9px;
}
.paging a{
width:24px;
padding:4px 0;
display:block;
}
.paging .first a:before,
.paging .last a:after{
display:inline-block;
vertical-align:top;
}
.paging .first a:before{
content:'<<';
margin:0 4px 0 0;
}
.paging .last a:after{
content:'>>';
margin:0 0 0 4px;
}
.paging strong,
.paging a:hover{
background:#f8f8f8;
border:1px solid #d9d9d9;
}
.paging strong{
display:block;
padding:4px 0;
width:22px;
}
.paging a:hover{
color:#000;
text-decoration:none;
}
.paging span{
display:block;
padding:4px 3px 0;
}
为了进一步清楚起见，我放置了一个简短的 GIF 图片，可以在此处找到链接。 http://screen.w3.ua/Aug14/30191123.gif
最佳答案
乍一看，您好像添加了边框。将边框更改为 a:hover 的轮廓。但是，这可能会导致与旧版 IE 的兼容性问题。
编辑:
为了克服隐藏的边界，替换
.paging ul{ overflow:hidden; }
与
.paging ul{ overflow:visible; }
关于html - 悬停时链接略微移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25291048/