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 imgdisplay: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 回答