图像上的 IE8 透明 div答案

【问题标题】：IE8 transparent div over an image图像上的 IE8 透明 div
【发布时间】：2013-03-20 11:31:47
【问题描述】：

为此，我在 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 &nbsp;）

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

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

【问题讨论】：

如果可以的话，把 html/css 放在服务器的某个地方，这样我就可以在那里测试了，但是乍一看，我看到一个 div 在锚点中，IE8 对此不太友好，我不要想。
是的，这可能就是原因，我想知道是否有任何解决方法。这是页面fiddle.jshell.net/HLua8/2/show
看看fiddle.jshell.net/HLua8/4/show 我所做的只是添加背景颜色，并删除新的休息空间......但似乎解决了这个问题，尽管引入了一个新问题（背景颜色)。我只是在 ie8 浏览器模式下运行 ie9，所以可能不正确..

标签： html css internet-explorer internet-explorer-8

【解决方案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>

【讨论】：

完美！您根本不需要更改 HTML，只需将 background-image:url(img/blank.png) 添加到 .layer 即可！非常感谢！