Question

当我将鼠标悬停在链接上时，链接会略微移动。我怎么解决这个问题。我们不能在不使用盒子大小属性的情况下解决它吗？

这是我的标记。

 <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

Answer 1

快速浏览一下，看起来就像是添加了一个边框。将边框更改为a的轮廓：悬停。但是，这可能会给旧IE带来兼容性问题。

编辑：

要克服隐藏的边框，请替换

.paging ul{ overflow:hidden; }

与

.paging ul{ overflow:visible; }

Example

Answer 2

您应该将box-sizing:border-box;添加到.paging a

希望它有助于 DEMO

Answer 3

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

没有悬停的Box模型没有边框

enter image description here

悬停的Box模型的边框为1 px

enter image description here

但我建议 Demo （即为锚标记添加透明边框）

CSS

.paging a {
    width:24px;
    padding:4px 0;
    display:block;
    border:1px solid transparent; /* add this */
}

Answer 4

您在悬停时添加了边框，这会将框模型推出。

border:1px solid #d9d9d9;

如果您不希望边框处于常规状态，只需将其设置为与背景颜色相同，或提供填充以匹配悬停的整体尺寸。

Answer 5

问题是您在悬停时为链接添加了1px边框。解决问题的最简单方法是替换此css代码：

.paging a{
   width:24px;
   padding:4px 0;
   display:block;
}

以下内容：

.paging a{
   width:24px;
   padding:4px 0;
   display:block;
   border: 1px solid transparent;
}

我们在这里做的是添加透明的1px边框。这需要在悬停时添加边框，它现在只是替换边框的颜色。

链接在悬停时略有移动

5 个答案: