Question

我在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中打开this）

在IE8上，.layer（即十字光标）仅在左上角（它最小化到内容，即3 x  ）

我注意到将.main img设置为display:none但我需要图片

时效果很好

有人可以帮助我让IE8上显示的.layer尽可能大吗？（即100％宽度50％高度，就像在其他浏览器上一样）

Answer 1

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

添加到您的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>

IE8透明div在图像上

1 个答案: