這是我code：IE渲染背景：透明的洞？

HTML

<div class="myDiv">text under link!</div>   
<a class="myLinkTransparent" href="#">&nbsp;</a>  
<a class="myLinkRed" href="#">&nbsp;</a>

CSS

.myDiv 
{ 
    position:relative; 
    z-index:40; 
    width:310px; 
} 

.myLinkTransparent 
{ 
    z-index:50; 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100px; 
    text-decoration:none; 
    background-color:transparent;  
} 

.myLinkRed 
{ 
    z-index:50; 
    position:absolute; 
    top:0px; 
    left:100px; 
    width:100px; 
    text-decoration:none; 
    background-color:red;  
}

與透明和紅色背景鏈接都應該「鏈接」。

但事實上，在IE（每個版本我嘗試：7,8,9）鏈接是「破」，如鏈接上方的文本「洞」。

爲什麼？我該如何解決這個問題？

來源

2012-02-20 markzzz

我不知道你的_hole_的意思，但對我來說，在FF看起來完全一樣，Chrome瀏覽器，IE8 + ... – elclanrs 2012-02-20 08:14:14

如果你將光標放在文本上（實際上是在透明背景的第一個鏈接上面），你可以將它看作「鏈接」（你不能點擊它）你知道什麼嗎？我的意思是？ – markzzz 2012-02-20 08:21:36

當然，這在IE上！在其他瀏覽器上一切正常... – markzzz 2012-02-20 08:26:08

1。由於默認情況下在JsFiddle中設置了Normalized CSS選項，因此行爲不像您期望的那樣完全一樣（請查看JS框架選項左側的左側）。讓我們刪除它以保證我們擁有所有樣式。

2。但是，只是取消選中它並不能完全解決問題。您可以在左上角感應它，並獲取較小的寬度和高度。

要解決的寬度，你需要設置display:block;

3。要修復高度，您需要設置實際高度。例如height: 35px;。

4。畢竟，你會發現鏈接只能在非文本區域點擊，因爲瀏覽器知道它是透明的，它認爲它也是點擊。

這種行爲描述如下：http://haslayout.net/css/No-Transparency-Click-Bug

您需要應用下面的修補程序（從文章複製，只是更改的文件名）：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="non-existing-or-so.png",sizingMethod="scale");

。

修改後的小提琴（在IE9標準模式下爲IE9，IE8，IE7測試：

http://jsfiddle.net/Meligy/PPdbc/11/

來源

2012-02-20 09:39:48 Meligy

找到另一個智能解決方案：只需添加一個背景圖片：url（../ private_images/trasparenza_input.png）; ，1x1像素透明！因此，IE「瞭解」，有一些「背景」，問題是固定的:) – markzzz 2012-02-21 16:27:53

如果你想採取這是另一條路線。只關注要點問題，但確定你可以有一個gif透明圖像或其他任何替代方案。 – Meligy 2012-02-21 21:58:56

不確定，但可能是一個錯誤。

可以嘗試下面

變通方法設置背景顏色作爲綠色myLinkTransparent類
然後，只需通過設定濾波器中設定不透明度爲零：α（不透明度= 0）; in myLinkTransparent類

.myLinkTransparent z-index：50; { z-index：50; position：absolute; top：0px; left：0px; width：100px; text-decoration：none; background-color：green; filter：alpha（opacity = 0）;
}

來源

2012-02-20 08:50:54 Somnath

IE渲染背景：透明的洞？

HTML

CSS

回答

相關問題