此 DIV 未在 Internet Explorer 上显示答案

【问题标题】：This DIV is not shown on Internet Explorer此 DIV 未在 Internet Explorer 上显示
【发布时间】：2010-10-08 09:00:30
【问题描述】：

我需要做一些警报消息（如验证等），我正在使用 DIV 来做。

这就是我进行验证的方式：

<form action="index.php" method="post" onsubmit="return validateSearchKeyword();">
        <input class="text_search" id="text_search" name="text_search" type="text" value="pesquisar" onfocus="if (this.value=='pesquisar') this.value = ''" onBlur="if (this.value=='') this.value = 'pesquisar'"  />
    </form>

和验证功能：

function validateSearchKeyword()
{
if (document.getElementById('text_search').value==""){creatediv('divAvisoPesquisa','You must supply a value', '355px', '125px');return false;}
}

这是创建DIV的函数：

function creatediv(id, html, left, top) {

if (document.getElementById(id)) 
    {
        //document.getElementById(id).style.display='block';
        //fadeIn(id, 300);
    }
    else
    {
        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', id);
        newdiv.setAttribute("class", "warningDiv"); 
        newdiv.style.position = "absolute";
        newdiv.innerHTML = html;
        newdiv.style.left = left;
        newdiv.style.top = top;
        newdiv.style.display = "none";
        newdiv.onclick=function(e) {
            $(this).fadeOut(300, function() { $(this).remove(); });
        };  
        document.body.appendChild(newdiv);
        $("#"+id).fadeIn(300); 
    }
}

fadIn 和 fadeOut 函数来自“jquery-1.3.1.min.js”

CSS...

.warningDiv{
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    font-size:11px;
    font-weight:bold;
    height:55px;
    padding:15px 25px;
    width:320px;
    z-index:100000;
    display: block;
}

因此，这适用于所有浏览器，但 Internet Explorer 除外。即使验证有效（未通过验证时不提交表单），但未显示 DIV。我该如何解决这个问题？

谢谢

【问题讨论】：

您能否更具体地提供 IE 版本？还是每个版本都会出现这种情况？
我正在用 IE 7 测试它
我只是想知道：z-index:100000 可能是造成这种情况的原因吗？

标签： javascript internet-explorer dom html

【解决方案1】：

我几乎可以肯定 JQuery 的 .fadeIn 在 IE6 上不起作用。

尝试不使用淡入淡出效果的函数或将效果调用更改为：

$("#"+id).fadeIn(300,function() { $(this).show(); });

【讨论】：

我已经尝试不使用淡入淡出并且注释了 display = "none"; 但没有显示 DIV。但是我安装了IEDeveloperToolbar，并且创建了div，但是不可见，我只是不知道为什么。谢谢
@Armadillo：根据 IE 工具栏，元素是否具有正确的样式？显示：块、视图内的位置、z-index 大等？
@Adam Bellaire: 不...这是样式行显示的内容：“左：120 像素；位置：绝对；顶部：250 像素”|没有 z-index、块等，很奇怪：|
@Armadillo：它在这里按预期工作。一定要设置 DOCTYPE，否则 IE 会以 quirks 模式呈现您的页面（我建议您使用 XHTML）。另外，检查应用于该 div 的 CSS。
已定义 DOCTYPE。我会尝试弄乱CSS。谢谢

【解决方案2】：

我想我明白了。如果您使用，似乎 IE 不会以正确的方式应用类：

    newdiv.setAttribute("class", "warningDiv");

尝试改用这个：

    newdiv.className="warningDiv";

...我刚刚测试过，它在 IE 开发人员工具栏中显示了所有正确的 CSS 属性，而使用前者时没有这样做。

【讨论】：