Mozilla 和 Chrome 在 CSS 上的区别答案

【问题标题】：Mozilla and Chrome difference on CSSMozilla 和 Chrome 在 CSS 上的区别
【发布时间】：2014-11-17 23:41:20
【问题描述】：

我的 CSS 有问题。它在 chrome 上运行良好，但在 Mozilla Firefox 上运行良好。

当鼠标悬停在图标上时，我的代码将 twitter 图标移到左侧。

我的HTML代码：

<header>

  <div id="animation">
    <a href="http://www.facebook.com.tr">
      <img id="socialiconface" src="images/facebook.png">
    </a>

    <a href="http://www.twitter.com.tr">
      <img id="socialicon" src="images/twitter.png">
    </a>
  </div>

</header>

我的 CSS 在那里：

#socialicon {
  position: absolute;
  -webkit-transition-property: margin-right;
  -moz-transition-property: margin-right;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  width: 40px;
  height: 40px;
  top: 5px;
  right: 2px;
}

#socialiconface {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 5px;
  right: 2px;
}

#socialicon:hover {
  margin-right: 70px;
}

不幸的是，无论我尝试了什么，都不起作用，有人可以帮助我吗？

【问题讨论】：

标签： html css google-chrome firefox mozilla

【解决方案1】：

更新此行以覆盖整个动画 div，否则您将不得不用鼠标跟随图标使其动画化，因为它会移开。

#animation:hover #socialicon {
    margin-right: 70px;
}

完整代码：

#socialicon {
    position: absolute;
    -webkit-transition-property: margin-right;
    -moz-transition-property: margin-right;
    -webkit-transition-duration:2s;
    -moz-transition-duration: 2s;
    width:40px;
    height: 40px;
    top: 5px;
    right: 2px;
}
#socialiconface {
    position:absolute;
    width:50px;
    height: 50px;
    top: 5px;
    right: 2px;
}
#animation:hover #socialicon {
    margin-right: 70px;
}
img {
    background: #ccc;
}

<header>
    <div id="animation">
        <a href="http://www.facebook.com.tr"><img id="socialiconface" src="images/facebook.png" /></a>
        <a href="http://www.twitter.com.tr"><img id="socialicon" src="images/twitter.png" /></a>
</div>
</header>

【讨论】：

【解决方案2】：

原因是因为一旦 img 移过鼠标光标，:hover 样式就不再适用。甚至 Chrome 也会这样做，但它似乎在鼠标移动之前不会检查 :hover 状态。

您可以尝试为right 设置动画而不是margin 并提供一些正确的填充：

#socialicon {
  position: absolute;
  -webkit-transition-property: right;
  -moz-transition-property: right;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  width: 40px;
  height: 40px;
  top: 5px;
  right: -68px;
  padding-right: 70px
}
#socialiconface {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 5px;
  right: 2px;
}
#socialicon:hover {
  right: 2px;
}

<header>


  <div id="animation">

    <a href="http://www.facebook.com.tr">
      <img id="socialiconface" src="images/facebook.png">

    </a>

    <a href="http://www.twitter.com.tr">
      <img id="socialicon" src="images/twitter.png">

    </a>
  </div>

</header>

【讨论】：