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

回答

相關問題