JavaScript 适用于 IE，但不适用于 Firefox答案

【问题标题】：JavaScript works in IE, but not FirefoxJavaScript 适用于 IE，但不适用于 Firefox
【发布时间】：2012-06-23 18:28:53
【问题描述】：

在我的 .NET 项目中，我在 HTML 页面中使用了一个按钮，它带来了隐藏的 <div>。 <div> 包含一个用于插入公司的表单。

HTML：

<div class="top-div-where-is-my-ADD-button">
    <h2>
        Search:
        <input type="text" id="search" />
        <div id="divADD" onclick="AddCompany()">
            <span>Add Company</span></div>
    </h2>
</div>

    <div id="hide" style="visibility: hidden; height: 0px; padding-bottom: 10px;">
    <table id="CompanyDetails" class="company" style="width: 100%; text-align: center;">
.........
</div>

JavaScript：

function AddCompany() {
    HideCompany();
    $(hide).css({ visibility: "visible", height: "auto" });
    var a = document.getElementById("divbuttonSaveCompany");
    a.onclick = InsertCompany; 
}

function InsertCompany() {
    var a = document.getElementById("Name").value;
    var b = document.getElementById("Address").value;
    var c = document.getElementById("Country").value;
    var d = document.getElementById("Phone").value;
    var e = document.getElementById("Fax").value;
    var f = document.getElementById("Email").value;
    var gg = document.getElementById("Contact");
    var g = gg.options[gg.selectedIndex].value;
    $.ajax({
        url: '@Url.Action("AddCompany", "Company")',
        data: { nameCompany: a, address: b, country: c, phone: d, fax: e, email: f , contact: g},
        dataType: "html",
        type: "POST",
        error: function () {
            alert("error");
        },
        success: function (data) {
            alert("Company was successfully added! ");
            $("#all").html(data);
        }
    });
}
function HideCompany() {
    $(hide).css({ visibility: "hidden", height: "0" });
    $("#Name").val("");
    $("#Address").val("");
    $("#Country").val("");
    $("#Phone").val("");
    $("#Fax").val("");
    $("#Email").val("");
}

所以基本上在 IE 中，当我按下 AddCompany 按钮时，隐藏的 <div> 会出现，但在 FF 中不会出现。

有人知道我需要做什么来解决这个问题吗？

【问题讨论】：

FF 控制台有错误吗？
我猜你没有看到hidden 标签上的“请勿使用”大提示。
在 FF 控制台中我有这个： ascunde 未定义 HideCompany()Institution（第 167 行） AddCompany()Institution（第 134 行） onclick()onclick（第 2 行）事件 = 单击 clientX=1172， clientY=187 [打破此错误] $(hide).css({ visibility: "hidden", height: "0" });

标签： javascript .net firefox visibility

【解决方案1】：

问题是这样的：

$(hide)

这在 IE 中有效，因为 IE 为每个带有“id”的元素创建了一个全局变量。 Firefox 不会这样做。

将所有对$(hide) 的引用更改为$('#hide')。

【讨论】：

嗯，这很有趣。我刚刚假设它是在其他地方定义的，但你可能是对的。一些 MS 家伙有非常奇怪的想法......
@MikeThunder 不要忘记accept。这将帮助其他用户找到此答案。

【解决方案2】：

使用the jQuery hide function 隐藏元素，使用the show function 显示它。

将高度设置为 0 是非标准的。

【讨论】：

这不是正确的隐藏方式。根据其他元素，它可能会产生副作用。它甚至并不总是有效。如果你想隐藏，隐藏。
好吧，我认为这不是问题所在。
我同意。这里的区别不是 JavaScript，而是 CSS。 jQuery 擅长修复浏览器平台之间的一些违规行为，因此请利用它。

【解决方案3】：

您是否尝试过使用 display 属性而不是 visibility？

当使用 visibility 元素即使不显示也会占用空间，使用 display 元素不占用空间，所以你不必担心身高。

你似乎在使用 jQuery，你能使用 div 来调整你的 div 的可见性吗

$(隐藏).show();

$(隐藏).hide();

或者干脆

$(隐藏).toggle();

这些是使用 css display 属性 (see doc)

的 jQuery 快捷方式

【讨论】：

现在完美运行。谢谢尖尖