15

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

我尝试在通话前后添加警报，它们显示显示已从 更改为none，block但未div显示。

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

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

  • 使用不同的文档类型（XHTML 1、HTML 4 等）
  • 使用可见性可见/隐藏而不是显示块/无
  • 使用内联 javascript 而不是函数调用
  • 从不同的机器测试

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

4

9 回答 9

7

你能提供一些重现错误的标记吗？

您的情况一定与您的代码有关，因为我可以让它在 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>

于 2008-08-13T21:10:41.933 回答
7

由于使用 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。

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

于 2008-08-14T15:23:10.273 回答
5

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

document.getElementById('editRow').style.display = '';
于 2009-05-29T16:55:29.210 回答
2

其实我遇到了你在这里描述的同样的问题。真正解决我的问题的是更改文档属性。

旧 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>
于 2011-04-18T16:12:45.880 回答
1

检查错误控制台（Firefox 3 中的工具菜单 > 错误控制台）以确保没有发生您没有看到的另一个错误，这会阻止您的脚本工作。

于 2008-08-13T21:05:23.100 回答
1

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

于 2008-08-13T23:36:09.770 回答
1

你必须写一个window.onload方法：

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

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

var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';
于 2011-08-05T06:23:51.233 回答
0

在 Firefox 3.5 上有一个恼人的显示错误，但在 IE7 或 Firefox 2.0.9 上没有

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

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

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

于 2009-11-21T21:10:04.920 回答
0

我给你一个大提示：

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

如果你有一些风格，那么 document.style 就可以了！如果你在课堂上有东西，它不会出现在 document.style 和 class="..." 将覆盖它！

想想这个，这会解决很多问题。只需这一点点了解，您就可以摆脱这种 MIND VIRUS。祝你有美好的一天。干杯，Ron Lentjes，LC CLS。

于 2013-06-14T03:46:46.350 回答