style.display 在 Firefox、Opera、Safari 中不起作用 - IE7 正常
-
08-06-2019 - |
题
我有绝对的定位 div
我想在用户单击链接时显示。这 onclick
链接的调用一个 js 函数,该函数将 div 的显示设置为阻止(也尝试过:"", inline
, table-cell
, inline-table
, , ETC)。这在 IE7 中效果很好,但在我尝试过的所有其他浏览器(FF2、FF3、Opera 9.5、Safari)中则完全不起作用。
我尝试在通话前后添加提醒,它们显示显示内容已从 none
到 block
但是 div
不显示。
我可以得到 div
如果我使用 Firebug 的 HTML 检查器更改显示值(但不是通过 Firebug 的控制台运行 javascript),则在 FF3 中显示 - 所以我知道它不仅仅显示在屏幕之外,等等。
我已经尝试了我能想到的一切,包括:
- 使用不同的文档类型(XHTML 1、HTML 4 等)
- 使用可见性可见/隐藏而不是显示块/无
- 使用内联 javascript 而不是函数调用
- 从不同的机器进行测试
关于什么可能导致这种情况的任何想法?
解决方案 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.
对于所有回答的人,感谢您的帮助!
其他提示
您能提供一些重现该错误的标记吗?你的情况一定与你的代码有关,因为我可以让它在 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>
找到了答案:我需要使用以下命令使其在两种浏览器上都能工作:
document.getElementById('editRow').style.display = '';
事实上,我也遇到了你在这里描述的同样的问题。真正解决我的问题的是更改文档属性。
旧的 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>
检查错误控制台(Firefox 3 中的“工具菜单”>“错误控制台”),确保没有发生其他您未看到的错误,这些错误会导致脚本无法运行。
尝试设置 div 的高度和宽度,并通过将其 z-index 设置为高于其他所有内容来确保它位于顶部。如果绝对定位的 div 位于相对定位的元素内部,则它的顶部和左侧位置基于相对定位元素的顶部和左侧。尝试将 div 放在 body 元素下方。
你必须写一个 window.onload
方法:
window.onload = document.getElementById('testdiv').style.display='inline';
或者你也可以创建一个变量:
var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';
在 Firefox 3.5 上有一个恼人的显示错误,但在 IE7 或 Firefox 2.0.9 上却没有
我有 3 个 DIV 的绝对位置 - 第一个是纯文本;第二个带有 CSS 菜单(带 UL 和 LI 的 Sucklefish 类型),第三个同上。即使使用 W3C 的 HTML 验证器检查并发现编码是完美的,第三个也根本不会显示。
作为临时措施,我合并了第二个和第三个 DIV 的内容。
当 IE7 和 FF2 显示正常但 FF 3.5 不显示时,Mozilla 的情况一定很糟糕
我给你一个重要的提示:
<div style="..." class="..."> ... </div>
如果你有一些风格,那么 document.style 就可以了!如果你在课堂上有一些东西,它不会显示在 document.style 中,并且 class="..." 将覆盖它!
想想这一点,这将解决很多问题。只需要一点点了解就能让你摆脱这种心灵病毒。祝你有美好的一天。干杯,Ron Lentjes,LC CLS。