Question

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

所以我的网站标题上有三张图像堆叠在一起。底部的一个是带有移动臂的.gif，上面的那个是与.gif相同但没有手臂且分辨率更高的图像（因为.gif不支持相似的图像质量。）On与高分辨率选择相同的层，我有一个只有手臂的高分辨率图像。我有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的方法将其删除？

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;
}

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

1 个答案: