IE8图像上的透明div

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中打开)

在IE8上，.layer(即。(十字准星光标)只在左上角(它将自己最小化到内容，即3 ×  )

我注意到当我将.main img设置为display:none时效果很好，但我需要图像

有人可以帮助我使.layer显示在IE8上，因为它应该是大?(即。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>