CSS高度和宽度属性在IE10中无法正常工作

（在本期之前，我使用条件IE语句将部分内容从IE浏览器中排除，但IE10不再支持。）

因此，我在我的网站的标题上有三张图片，它们相互堆叠在一起。底部的一个是带有移动手臂的.gif，上面的一个是与.gif相同的图像，但根本没有手臂，分辨率更高（因为.gif无法支持类似的图像质量）。在与hi-res pick相同的层上，我有一个手臂的hi-res图像。我设置了css，这样当图像悬停在上方时，唯一的arm图像就会消失，显示移动手臂时的.gif

您可以在此处查看： （如果在Chrome或Firefox中查看，它将正常工作。如果在IE 10之前的版本中查看，只有gif将显示，而没有悬停动画，如果在IE10中查看，它将显示solo arm no与背景图像正确对齐（尽管动画正常工作）

我认为问题在于这一准则：

#chicken {
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

#chicken:hover {
opacity:0;
}

这是solo手臂的CSS代码，在Chrome和FF上，宽度和高度100%属性正确工作，手臂与背景对齐，但在IE中，由于某种原因，它不起作用

---

有人能告诉我，是让手臂与图像对齐，还是仅在IE中使用适用于IE10的方法将其删除？

您应该能够通过将

文本对齐：居中

添加到

\chicken

来解决此问题，如下所示：

#chicken {
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center; /* add this */
}

另一种方法是添加以下规则：

#chicken a{
    display: block;
    text-align: center;
}

---

您好！为什么您需要动画这样工作？为什么不只拥有两个图像，并使用JS在悬停状态下更改它们？