相对元素下的绝对元素导致Firefox下的奇怪行为

时间:2016-05-23 12:43:44

标签: html css firefox css-transitions

此代码按照预期在Chrome上运行:

请将鼠标悬停在蓝色球上以获取动画:



<!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      position: relative;
      width: 100%;
      height: 200px;
      border: thin solid #6D6;
      overflow: hidden;
    }
    h2 {
      position: absolute;
      border-radius: 100%;
      background-color: blue;
      height:100px;
      width: 100px;
      transition:all 1s ease-out;
      margin: auto;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
    
    h2:hover {
      height: 300px;
      width: 300px;
    }
  </style>
</head>

<body>
  <div class='container'>
    <h2></h2>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

但是中间的球在Firefox中扩展到了底部,我必须设置顶部或底部以使其恢复到正确的位置。无论如何都要让它保持在中间而不分配顶部和底部值,就像在Chrome中一样?

2 个答案:

答案 0 :(得分:0)

将块元素置于相对定位容器中间的一个很好的技巧是使用transform: translateY(-50%) .container { position: relative; width: 100%; height: 200px; border: thin solid #6D6; overflow: hidden; } h2 { position: relative; border-radius: 100%; background-color: blue; height: 300px; width: 200px; margin: auto; top: 50%; transform: translateY(-50%); }

需要IE9 +

  <div class='container'>
    <h2></h2>
  </div>
{{1}}

JSFiddle演示:https://jsfiddle.net/oujab44t/1/

答案 1 :(得分:-4)

setuptools.find_packages()