IE8在图像

我得到了IE8这个IE8在图像

HTML一个怪异的行为透明的div：

<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/（或打开this在IE8）

在IE8上，.layer（即十字光标）仅在左上角（它最大限度地减少自己的内容，这是3× ）

我发现它工作得很好，当我设置.main img到display:none，但我需要的图像

有人能帮助我，使.layer所示在IE8应该是这样大？（即100％宽度50％的高度，就像在其他浏览器上一样）

来源

2013-03-18 Aximili

，如果你可以，将HTML/CSS放在某个服务器上，这样我就可以ñ测试那里，但乍一看我看到一个锚在一个div，IE8并不太热情，我不认为。 – belens 2013-03-19 00:26:08

是的，这可能是为什么，我想知道是否有任何解决方法。这里是页面http://fiddle.jshell.net/HLua8/2/show/ – Aximili 2013-03-20 02:20:28

看看http://fiddle.jshell.net/HLua8/4/show/所有我做的是添加背景颜色，并删除您的新休息空间......但似乎解决了这个问题，尽管通过引入一个新问题（背景颜色）。我只是在ie8浏览器模式下运行IE9，所以可能不正确.. – lukeocom 2013-03-20 02:59:52

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

添加到您的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-20 03:26:08 lukeocom

完美！您根本不需要更改HTML，只需将'background-image：url（img/blank.png）'添加到'.layer'中即可使用！非常感谢！ – Aximili 2013-03-21 04:14:42

回答

相关问题