1

为此，我在 IE8 上有一个奇怪的行为

HTML：

<a class='main'>
  <img src='http://annawrites.com/blog/wp-content/uploads/2011/04/color-explosion.jpg' />
  <div class='layer'>&nbsp;&nbsp;&nbsp;</div>
</a>

CSS：

.main { display: block; position: relative; width: 100px; height: 100px; }
.main img { width: 100px; height: 100px; /*display: none;*/ }
.layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 50%; cursor: crosshair; }

JSFiddle： http: //jsfiddle.net/HLua8/2/（或在IE8中打开）

在 IE8 上，.layer（即十字光标）仅位于左上角（它将自身最小化为内容，即 3 x &nbsp;）

我注意到当我设置为时它工作正常.main img，display:none但我需要图像

有人可以帮我.layer在 IE8 上显示它应有的大小吗？（即 100% 宽 50% 高，就像在其他浏览器上一样）

4

1 回答 1

2

经过多次摆弄，我能为您想出的最佳解决方案是创建一个空白/透明图像并将其用作图层的背景图像。

添加到您的CSS：

.layer {background-image:url(blank.png);}    
.layer:hover{cursor: crosshair;}

您的文档的更新版本如下所示：

CSS：

#container {
    margin:40px;
    position: relative;
    width: 100px;
    height: 100px;
}

.main img {
    max-width: 100%;
}
.layer {
    position: absolute;
    top: 0px;left: 0px;
    width: 100%;height: 50%;
    background-image:url(img/blank.png);
}

.layer:hover{cursor:crosshair;}

html:

<div id="container">
   <a class='main' href="test.html"><img src='http://annawrites.com/blog/wp-content/uploads/2011/04/color-explosion.jpg' /></a>
   <div class='layer'></div>
</div>
于 2013-03-20T03:26:08.537 回答