div可見在Firefox中不工作，不顯示

[編輯]問題內部圖像現在包含可編輯內容的另一個專區內解決div可見在Firefox中不工作，不顯示

我有一個編輯器（DIV與圖像）按鈕，我的計劃是有按鈕隱藏，直到光標懸停在內容div上。

我的問題是，如果我在CSS中使用display:none;，然後使用JavaScript函數再次顯示和隱藏divButton，則圖像不會在FireFox中顯示。

如果我使用element.style.visibility = "visible";，那麼FireFox根本不會顯示div。

任何投入將是非常讚賞謝謝:)

相關代碼：

HTML

<div id="c1ContentSrc" class="widgetContent editable"> 
    @Html.Raw(HttpUtility.HtmlDecode(row.column1Content)) 
    <div id="c1ContentEdit" class="cmsEditButton"><img src="../../Content/images/cmsEdit.png" alt="edit" /></div> 
</div>

CSS

.cmsEditButton{ 
    display:none; 
    position:absolute; 
    top:37px; 
    right:8px; 
    width:16px; 
    height:16px; 
}

備用CSS

.cmsEditButton{ 
    visibility:hidden; 
    position:absolute; 
    top:37px; 
    right:8px; 
    width:16px; 
    height:16px; 
}

javascript函數

function showEditButton(id, editId) { 
    if(editId.style.display == "none"){ 
     if (!id.isContentEditable) { 
      editId.style.display = "block"; 
     } 
    }else{ 
     editId.style.display = "none"; 
    } 
}

替代JavaScript代碼

function showEditButton(id, editId) { 
    if (editId.style.visibility == "hidden" || editId.style.visibility == "") { 
     if (!id.isContentEditable) { 
      editId.style.visibility = "visible"; 
     } 
    }else{ 
     editId.style.visibility = "hidden"; 
    } 
}

函數調用

document.getElementById("c1ContentSrc").addEventListener("mouseover", function() { 
     showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit")) 
    }, false); 

document.getElementById("c1ContentSrc").addEventListener("mouseout", function() { 
     showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit")) 
    }, false);

問題已經用下列變化現在解決，移動剃刀輸出上述圖像，它似乎是干擾，也刪除了不必要的div

<div id="c1ContentSrc" class="widgetContent editable"> 
    <img id="c1ContentEdit" class="cmsEditButton" title="edit" src="../../Content/images/cmsEdit.png" alt="edit" /> 
    @Html.Raw(HttpUtility.HtmlDecode(row.column1Content)) 
</div>

來源

2013-03-22 Dreamscourge

這裏重現該問題：http://jsfiddle.net – 2013-03-22 10:43:38

有你得到的js，調用函數 – Pete 2013-03-22 10:50:01

函數調用添加爲請求，以爲我已經把它們放在^ _^ – Dreamscourge 2013-03-22 11:06:46

而不是使用可見性;您可以使用可視性如果您使用的顯示器使用

display:none; 
display:block; 
display:none !important; 
style="display:none;" //inline css

避免的，你可以與他們同時播放和實施正確的代碼...

來源

2013-03-22 10:48:29 SaurabhLP

我使用display：none;最初這是什麼導致了問題，能見度是我試圖沒有成功，以避免圖像不顯示問題。 – Dreamscourge 2013-03-22 11:08:49

也許圖像的網址不正確... – SaurabhLP 2013-03-22 11:13:35

如果我刪除顯示：無;從CSS圖像顯示 – Dreamscourge 2013-03-22 11:15:58

div可見在Firefox中不工作，不顯示

回答

相關問題