CSS转换不工作在FF的顶部属性 [英] CSS transition does not work on top property in FF

问题描述

我有以下HTML：

<ul>
    <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
     <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
     <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
</ul>

CSS

ul {
    list-style: none;  
    text-align: center;
}
ul li {
    position: relative;
    float: right;
    margin-right: 20px;
    width: 30%;
}
ul li {
    transition: all 0.3s;
}
ul li:hover {
    top: -10px;
}
ul li> a{
    color: red;
}

问题是转换不适用于moz，它适用于webkit。如何以跨浏览器的方式实现这个？

The question is the transition does not work with moz, it works on webkit. How do I implement this in a cross browser way?

DEMO

推荐答案

浏览器不会对属性应用 transition 它的初始值没有在元素中指定。因此，将 top：0px 添加到 ul li 将会解决此问题。

Browsers don't apply transition on a property if an initial value for it is not specified in the element. Hence, adding top: 0px to ul li will solve the issue.

ul {
  list-style: none;
  text-align: center;
}
ul li {
  position: relative;
  float: right;
  margin-right: 20px;
  top: 0px; /* this line was added */
  width: 30%;
}
ul li {
  transition: all 0.3s;
}
ul li:hover {
  top: -10px;
}
ul li> a {
  color: red;
}

<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<ul>
  <li>
    <a href="#">
      <h2>title</h2>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>title</h2>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>title</h2>
    </a>
  </li>
</ul>

注意：我还建议使用Mr_Green的回答中提到的相同选项（ transform ）。

Note: I would also suggest using the same option (transform) as mentioned in Mr_Green's answer.

这篇关于CSS转换不工作在FF的顶部属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！