0

（在此问题之前，我使用条件 IE 语句将部分内容排除在 IE 浏览器之外，但 IE10 不再支持。）

因此，我的网站标题上的三张图片相互堆叠。底部是带有移动手臂的 .gif，上面是与 .gif 相同但完全没有手臂且分辨率更高的图像（因为 .gif 不支持类似的图像质量。）开与高分辨率选择相同的层，我有一个只有手臂的高分辨率图像。我设置了css，这样当图像悬停时，唯一的手臂图像就会消失，显示带有移动手臂的.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% 属性正常工作，手臂与背景对齐，但在 IE 中，由于某种原因它不起作用。

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

4

1 回答 1

2

您应该能够通过添加以下内容来解决此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;
}
于 2013-06-04T00:45:49.677 回答