javascript - Div 可见性在 Firefox 中不起作用，内部图像不显示

Question

[edit]问题现在解决了

我在另一个包含可编辑内容的 div 中有一个编辑(带图像的 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);

现在通过以下更改解决了问题，将图像移到 Razor 输出上方，它似乎有干扰，还删除了不必要的 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>

Answer 1

而不是使用可见性；你可以使用

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

如果您正在使用显示，请避免使用可见性，您可以同时使用它们并实现正确的代码...