IE javascript 兼容性正在杀死我答案

【问题标题】：IE javascript compatibility is killing meIE javascript 兼容性正在杀死我
【发布时间】：2009-06-30 22:39:07
【问题描述】：

我把跨浏览器的兼容性问题留到了最后，看来 IE 会很痛苦。在 IE 中没有任何工作；

首先，以下方法不起作用：

var img = document.createElement("img");
img.setAttribute("height", "270px");

我有一个不可见的 div onmouseover，它显示一个透明的 div“cpanel”。我也无法访问。

if(hover.addEventListener){
    hover.addEventListener('mouseover',function () {$('#cpanel').fadeIn("slow");/*Core.addClass(cpanel,"on");*/},false);
    hover.addEventListener('mouseout', function () {$('#cpanel').fadeOut("slow");/*Core.removeClass(cpanel,"on");*/},false);
}
else if(hover.attachEvent) {
    hover.attachEvent('onmouseover',function () {$('#cpanel').fadeIn("slow");/*Core.addClass(cpanel,"on");*/});
    hover.attachEvent('onmouseout', function () {$('#cpanel').fadeOut("slow");/*Core.removeClass(cpanel,"on");*/}); 
}

可能存在一些 z-index 问题？

由于 IE 没有进入后期阶段，我无法找到更多错误... :(

【问题讨论】：

你能让你的问题标题更具描述性吗？ :)
@WowtaH，我以为只有我……=）
正如下面的答案所述，让 jQuery 为您完成艰苦的工作。这就是它的设计目的，消除跨浏览器 JS 的一些痛苦。请参阅 docs.jquery.com/Events 和 docs.jquery.com/Core/jQuery#htmlownerDocument。希望对您有所帮助。

标签： javascript jquery css internet-explorer

【解决方案1】：

当 jquery（看起来已经在页面上）可以更可靠地执行时，为什么要手动附加事件处理程序？

$(hover).mouseover(function () { $('#cpanel').fadeIn("slow"); });
$(hover).mouseout(function () { $('#cpanel').fadeOut("slow"); });

对于图片：

var img = $("<img />");
img.css("height", "270px");

【讨论】：

我试过上面的方法。它在 FF 中工作正常，但 IE 甚至无法识别放置在图像顶部的空 div（“悬停”）在 cpanel 中淡出。我缺少一些 z-index hack 吗？
你能用 dom 结构编辑你的问题吗？我不明白你的意思。

【解决方案2】：

@height 属性（与高度样式属性不同）仅接受数值。

img.setAttribute("height", "270");

【讨论】：

【解决方案3】：

或将它们全部组合起来

$('<img/>').height(270).append('body');

如果没有指定px，则默认采用jQuery height method

甚至

$('<img/>').css({'height':'270px'}).append('body');

附加（或前置）到您需要的任何内容。

对于您正在尝试的悬停

var $cpanel = $('#cpanel');
$(div).hover(function(){//hover
$cpanel.fadeIn("slow");
},
function(){//hover out
$cpanel.fadeOut("slow");
});

最重要的是将面板缓存在 var save 中查找 2 次。

【讨论】：

【解决方案4】：

也许你可以尝试这样的事情......会带你弄清楚如何实现......但是有一个基本变量声明可以用于 javascript dom 更改

 var cross=document.all? document.all.cpanel: document.getElementById("cpanel");

   cross.style.width=100 +"px";   //eg of setting style.width property

类似的事情可能是让您的对象兼容编辑的开始。

【讨论】：