Question

我对这种现象感到困惑，当我将鼠标悬停在它上面时，我的旋转文字似乎移动了位置，我不知道如何修复它。这就是我的意思：http://jsfiddle.net/99o3ru7a/

HTML：

<div id= "social">
    <ul>
        <li><a href="#">Behance</a></li>
        <li><a href="#">The Loop</a></li>
        <li><a href="#">Linkedin</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
</div><!--social-->

CSS：

#social {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -ms-transform-origin:left; /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin:left; /* Chrome, Safari, Opera */
    transform:rotate(-90deg);
    transform-origin:left;
    position: fixed;
    top:75%;
    left:30px;
    width:100%;
}
#social ul {
    list-style:none;
}
#social a {
    color:#F00;
    margin:0 20px 0 20px;
    float:left;
    font-weight:bold;
    font-style:italic;
    font-size:1.5em;
}
#social a:hover {
    border-bottom:3px solid #F00;
    display:inline-block;
    padding: 0 0 5px 0;
}

Answer 1

您只是在悬停时向锚标记添加padding和border-bottom，这实际上会增加元素的整体高度，因此您会在hover期间看到位移

要解决此问题，您可以将border-bottom和padding同时添加到非悬停状态，如下所示：

#social a {
    color:#F00;
    margin:0 20px 0 20px;
    float:left;
    font-weight:bold;
    font-style:italic;
    font-size:1.5em;
    border-bottom:3px solid transparent;
    padding: 0 0 5px 0;
}

将transparent设置为border-bottom的颜色意味着即使border-bottom存在，当链接未悬停时，屏幕上也不会显示任何内容。当您悬停时，颜色将更改为red，但它所需的高度将保持不变，因为即使在非悬停状态下它也有3px边框（透明）。

#social {
  -ms-transform: rotate(-90deg);
  /* IE 9 */
  -ms-transform-origin: left;
  /* IE 9 */
  -webkit-transform: rotate(-90deg);
  /* Chrome, Safari, Opera */
  -webkit-transform-origin: left;
  /* Chrome, Safari, Opera */
  transform: rotate(-90deg);
  transform-origin: left;
  position: fixed;
  top: 75%;
  left: 30px;
  width: 100%;
}
#social ul {
  list-style: none;
}
#social a {
  color: #F00;
  margin: 0 20px 0 20px;
  float: left;
  font-weight: bold;
  font-style: italic;
  font-size: 1.5em;
  border-bottom: 3px solid transparent;
  padding: 0 0 5px 0;
}
#social a:hover {
  border-bottom: 3px solid #F00;
  display: inline-block;
}

<div id="social">
  <ul>
    <li><a href="#">Behance</a>
    </li>
    <li><a href="#">The Loop</a>
    </li>
    <li><a href="#">Linkedin</a>
    </li>
    <li><a href="#">Twitter</a>
    </li>
  </ul>
</div>
<!--social-->

Answer 2

你需要修正#social的高度：

#social {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -ms-transform-origin:left; /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin:left; /* Chrome, Safari, Opera */
    transform:rotate(-90deg);
    transform-origin:left;
    position: fixed;
    top:75%;
    left:30px;
    width:100%;
    height:40px;
}

当我将光标悬停在它上面时，旋转的文本会跳转

2 个答案: