Question

当用户点击链接时，我想要显示一个绝对定位的div。链接的onclick调用js函数，该函数将div的显示设置为阻止（也尝试过：“”，inline，table-cell，inline-table等。这在IE7中效果很好，在我尝试过的所有其他浏览器中都没有（FF2，FF3，Opera 9.5，Safari）。

我尝试在通话前后添加提醒，并显示显示已从none更改为block，但div未显示。

如果我使用Firebug的HTML检查器更改显示值（但不是通过Firebug的控制台运行javascript），我可以在FF3中显示div - 所以我知道它不仅仅是在屏幕外显示等等。

我已经尝试了我能想到的一切，包括：

使用其他doctype（XHTML 1，HTML 4等）
使用可见性/隐藏可见性而不是显示块/无
使用内联javascript代替函数调用
从不同的机器进行测试

关于可能导致这种情况的任何想法？

Answer 1

你能提供一些重现错误的标记吗？您的情况必须与您的代码有关，因为我可以在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>

Answer 2

由于使用javascript设置属性似乎永远不起作用，但是使用Firebug的检查进行设置，我开始怀疑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 。

对于所有回答的人，感谢您的帮助！

Answer 3

找到答案：我需要使用以下内容使其适用于两种浏览器：

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

Answer 4

其实我遇到了你在这里描述的同样的问题。实际修复我的问题的是更改文档属性。

旧DOCTYPE / html规范

<!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">

替换为

<html>

Answer 5

检查错误控制台（Firefox 3中的工具菜单＆gt;错误控制台），确保没有发生您没有看到的其他错误，这会阻止您的脚本停止工作。

Answer 6

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

Answer 7

您必须编写window.onload方法：

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

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

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

Answer 8

Firefox 3.5上存在令人讨厌的显示错误，但IE7或Firefox 2.0.9上没有显示错误

我有3个DIV的位置绝对 - 第一个用纯文本;第二个是CSS菜单（带有UL和LI的sucklefish类型）和第三个同上。即使编码已被检查并且发现W3C的HTML验证器完美，第三个也根本不会显示。

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

当IE7和FF2显示OK但不是FF 3.5时，Mozilla的情况一定很糟糕

Answer 9

我会给你一个大提示：

<div style="..." class="..."> ... </div>

如果你有风格的东西，那么document.style会起作用！如果你在课堂上有什么东西，它就不会出现在document.style中，而class =“...”会覆盖它！

想想这一点，这将清除很多问题。只有这一点了解就会让你觉得这个MIND VIRUS。祝你有美好的一天。干杯，Ron Lentjes，LC CLS。

style.display在Firefox，Opera，Safari中不起作用 - IE7 OK

9 个答案: