style.display在Firefox,Opera,Safari中不起作用-IE7确定
我有一个绝对定位的" div",我想在用户单击链接时显示它。链接的onclick调用一个js函数,该函数将div的显示设置为阻止(也尝试过:""," inline"," table-cell"," inline-table"等)。这在IE7中效果很好,在我尝试过的所有其他浏览器(FF2,FF3,Opera 9.5,Safari)中都无法实现。
我试过在通话之前和之后添加警报,它们显示显示已从"无"更改为"阻止",但未显示" div"。
如果我使用Firebug的HTML检查器更改显示值(但不能通过Firebug的控制台运行javascript),则可以使div显示在FF3中,所以我知道它不仅显示在屏幕上,等等。
我已经尝试了所有我能想到的,包括:
- 使用其他文档类型(XHTML 1,HTML 4等)
- 使用可见性/隐藏性而不是显示块/无可见性
- 使用内联JavaScript而不是函数调用
- 从不同的机器进行测试
关于什么可能导致此的任何想法?
解决方案
回答
检查错误控制台(Firefox 3中的"工具"菜单>"错误控制台"),以确保我们没有看到没有发生的其他错误,这正在阻止脚本运行。
回答
我们可以提供一些重现该错误的标记吗?情况必须与代码有关,因为我可以在IE,FF3和Opera 9.5上使用它:
function show() { var d = document.getElementById('testdiv'); d.style.display = 'block'; }
#testdiv { position: absolute; height: 20px; width: 20px; display: none; background-color: red; }
<div id="testdiv"></div> <a href="javascript:show();">Click me</a>
回答
尝试设置div的高度和宽度,并通过将其z-index设置为高于其他所有值来确保其位于顶部。如果绝对定位的div位于相对定位的元素内,则其顶部和左侧位置基于相对定位的元素的顶部和左侧。尝试将div放在body元素下方。
回答
由于使用javascript设置属性似乎无法正常工作,但是使用Firebug的inspect设置确实没有用,我开始怀疑javascript ID选择器是否损坏,也许DOM中有多个具有相同ID的项目?消息来源没有表明有,但是使用JavaScript遍历了所有div,我发现情况确实如此。这是我最终用来显示弹出窗口的功能:
function openPopup(popupID) { var divs = getObjectsByTagAndClass('div','popupDiv'); if (divs != undefined && divs != null) { for (var i = 0; i < divs.length; i++) { if (divs[i].id == popupID) divs[i].style.display = 'block'; } } }
(未列出实用程序功能getObjectsByTagAndClass)
理想情况下,我将找出为什么多次插入同一项目的原因,但是我无法控制渲染平台,而只能控制其输入。
因此,在调试此类问题时,请记住检查DOM中是否有重复的ID,这可能会破坏getElementById。
对于所有回答的人,谢谢帮助!
回答
找到了答案:
我需要使用以下内容使其在两种浏览器上都能正常工作:
document.getElementById('editRow').style.display = '';
回答
在Firefox 3.5上有一个令人讨厌的显示错误,但在IE7或者Firefox 2.0.9上却没有
我有3个DIV的位置,绝对是纯文本格式的第一个;第二个带有CSS菜单(带有UL和LI的鳞鱼类型)和第三个同上。即使已经检查了编码,并且发现使用W3C的HTML验证程序是完美的,第三个也不会显示。
作为临时措施,我合并了第二个和第三个DIV的内容。
当IE7和FF2显示"确定"而不是FF 3.5时,Mozilla的情况肯定不好