Question

在Chrome浏览器的实际版本中，当此代码的转换完成时会出现一个小问题：底部线条高度的1个像素移位（在链接悬停时）。

另外，我注意到在jsfiddle的代码片段中，这里可能看不到，但在CodePen和我网站上的，这就是发生的事情。检查Firefox - 一切都很好，并在每个网站上。

以下是Stack Overflow和CodePen的片段：

＆＃13;

body{
  background:#111;
}
ul{
  margin:0;
  padding:0;
  list-style:none;
}
ul li{
   float:left;
   position:relative;
    
  }
li a{
  padding:10px;
  color:#fff;
  text-decoration:none;
}
    
 li a:before{
      content:'';
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      background-color: #fb0;
      bottom: 0px;
      height: 15px;
      left: 0;
      margin: 0;
      padding: 0;
      position: absolute;
      width: 100%;
      transition:all 1s;
}
li a:hover:before{
      bottom:0;
      transform: scaleX(1);
      -webkit-transform: scaleX(1);
}

＆＃13;

<div>
  <ul>
    <li><a href="">Hello</a></li>
    <li><a href="">Worldsdfsdf</a></li>
  </ul>
</div>

＆＃13;

Answer 1

据我所知，这不是你的错，它是一个＆＃34;故障＆＃34;使用scaleX参数。如果你使用0.99作为值而不是1，它应该可以正常工作。

＆＃13;

body {
  background: #111;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  float: left;
  position: relative;
}
ul li a {
  padding: 10px;
  color: #fff;
  text-decoration: none;
}
ul li a:before {
  content: '';
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #fb0;
  bottom: 0px;
  height: 15px;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  transition: all 1s;
}
ul li a:hover:before {
  bottom: 0;
  transform: scaleX(0.99);
  -webkit-transform: scaleX(0.99);
}

＆＃13;

<div>
  <ul>
    <li><a href="">Hello</a></li>
    <li><a href="">Worldsdfsdf</a></li>
  </ul>
</div>

＆＃13;

CSS：在Chrome

1 个答案: