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

Question

(在此之前，我使用条件 IE 语句将其中的一部分从 IE 浏览器中排除，但 IE10 不再支持。)

因此，我在网站的标题中将三张图片堆叠在一起。底部的是带有移动 ARM 的 .gif，上面的是与 .gif 相同的图像，但根本没有 ARM 并且分辨率更高(因为 .gif 不能支持类似的图像质量)。与高分辨率选择相同的层，我有一个只有 ARM 的高分辨率图像。我设置了 CSS，以便当图像悬停时，唯一的 ARM 图像消失，显示带有移动 ARM 的 .gif。

您可以在这里查看:http://www.applocity.blogspot.com(如果在 Chrome 或 Firefox 中查看，它将正常工作。如果在 10 之前的 IE 中查看，将仅显示 gif，而没有悬停动画，如果在 IE10 中查看，它将显示单臂没有正确对齐背景图片(虽然动画有效)

我认为问题出在这段代码中:

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

#chicken:hover {
opacity:0;
}

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

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

Answer 1

您应该能够通过将 text-align: center 添加到 #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;
}