关于javascript:style.display在Firefox,Opera,Safari中不起作用-IE7确定

关于javascript:style.display在Firefox,Opera,Safari中不起作用-IE7确定

style.display not working in Firefox, Opera, Safari - IE7 OK

我有一个绝对定位的div,要在用户单击链接时显示。链接的onclick调用一个js函数,该函数将div的显示设置为"阻止"(也尝试过:",inlinetable-cellinline-table等)。这在IE7中非常有用,而不是根本不起作用在我尝试过的所有其他浏览器中(FF2,FF3,Opera 9.5,Safari)。

我尝试在呼叫之前和之后添加警报,它们显示显示已从none更改为block,但未显示div

如果我使用Firebug的HTML检查器更改显示值(但不能通过Firebug的控制台运行javascript),则可以使div显示在FF3中-因此,我知道它不仅显示在屏幕外,等等。

我已经尝试了所有我能想到的,包括:

  • 使用其他文档类型(XHTML 1,HTML 4等)
  • 使用可见/隐藏可见性,而不是显示块/无可见性
  • 使用内联JavaScript而不是函数调用
  • 从不同的机器进行测试

关于什么可能导致此的任何想法?


由于使用javascript设置属性似乎从未起作用,但是使用Firebug的inspect设置确实起作用,因此我开始怀疑javascript ID选择器已损坏-DOM中可能有多个具有相同ID的项吗?消息来源没有表明有,但是使用javascript遍历了所有div,我发现情况确实如此。这是我最终用来显示弹出窗口的功能:

1
2
3
4
5
6
7
8
9
10
11
12
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。

对于所有回答的人,谢谢您的帮助!


您可以提供一些重现该错误的标记吗?您的情况必须与您的代码有关,因为我可以在IE,FF3和Opera 9.5上使用它:

1
2
3
4
function show() {
  var d = document.getElementById('testdiv');
  d.style.display = 'block';
}
1
2
3
4
5
6
7
#testdiv {
  position: absolute;
  height: 20px;
  width: 20px;
  display: none;
  background-color: red;
}
1
Click me


找到了答案:
我需要使用以下内容使其在两种浏览器上都能正常工作:

1
document.getElementById('editRow').style.display = '';

实际上,我遇到的问题与您在此处描述的相同。真正解决了我问题的是更改文档属性。

旧的DOCTYPE / html规范

1
2
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

替换为

1
<html>

您必须编写一个window.onload方法:

1
window.onload = document.getElementById('testdiv').style.display='inline';

或者,您也可以创建一个变量:

1
2
var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';

尝试设置div的高度和宽度,并通过将其z-index设置为高于其他所有值来确保其位于顶部。如果绝对定位的div位于相对定位的元素内,则其顶部和左侧位置基于相对定位的元素的顶部和左侧。尝试将div放在body元素下方。


检查错误控制台(Firefox 3中的"工具"菜单>"错误控制台"),确保您没有看到没有发生的其他错误,这正在阻止脚本运行。


我给你一个大提示:

1
 ...

如果您有样式,则document.style将起作用!
如果您在课堂上有东西,它将不会显示在document.style中,而class =" ..."将会覆盖它!

考虑一下,这将解决许多问题。只需一点了解,您就可以摆脱这种心灵病毒。祝你有美好的一天。干杯,罗恩·伦特斯,LC CLS。


在Firefox 3.5上有一个令人讨厌的显示错误,但在IE7或Firefox 2.0.9上却没有

我有3个DIV的绝对位置-第一个带有纯文本的位置;第二个带有CSS菜单(带有UL和LI的鳞鱼类型),第三个同上。即使已经检查了编码,并且发现使用W3C的HTML验证程序是完美的,第三个也不显示。

作为临时措施,我合并了第二个和第三个DIV的内容。

当IE7和FF2显示正常但不显示FF 3.5时,Mozilla的情况肯定不好


推荐阅读