样式显示在 Firefox、Opera、Safari 中不起作用 -（IE7 正常）
[英]Style display not working in Firefox, Opera, Safari - (IE7 is OK)
问题描述
I have an absolutely positioned div that I want to show when the user clicks a link.
我有一个绝对定位的div ，我想在用户单击链接时显示它。 The onclick of the link calls a js function that sets the display of the div to block (also tried: "", inline , table-cell , inline-table , etc).链接的onclick调用了一个 js 函数，该函数将 div 的显示设置为阻止（也尝试过：""、 inline 、 table-cell 、 inline-table等）。 This works great in IE7, not at all in every other browser I've tried (FF2, FF3, Opera 9.5, Safari).这在 IE7 中非常有效，但在我尝试过的所有其他浏览器（FF2、FF3、Opera 9.5、Safari）中都没有。
I've tried adding alerts before and after the call, and they show that the display has changed from none to block but the div does not display.我尝试在通话前后添加警报，它们显示显示已从none更改为block但div未显示。
I can get the div to display in FF3 if I change the display value using Firebug's HTML inspector (but not by running javascript through Firebug's console) - so I know it's not just showing up off-screen, etc.如果我使用 Firebug 的 HTML 检查器更改显示值（但不是通过 Firebug 的控制台运行 javascript），我可以让div在 FF3 中显示 - 所以我知道它不只是显示在屏幕外等。
I've tried everything I can think of, including:我已经尝试了所有我能想到的方法，包括：
- Using a different doctype (XHTML 1, HTML 4, etc)使用不同的文档类型（XHTML 1、HTML 4 等）
- Using visibility visible/hidden instead of display block/none使用可见性可见/隐藏而不是显示块/无
- Using inline javascript instead of a function call使用内联 javascript 而不是函数调用
- Testing from different machines来自不同机器的测试
Any ideas about what could cause this?关于什么可能导致这种情况的任何想法？
9 个解决方案
解决方案1
7 2008-08-13 21:10:41
Can you provide some markup that reproduce the error?你能提供一些重现错误的标记吗？
Your situation must have something to do with your code since I can get this to work on IE, FF3 and Opera 9.5:你的情况一定与你的代码有关，因为我可以让它在 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>
解决方案2
7 已采纳 2008-08-14 15:23:10
Since setting the properties with javascript never seemed to work, but setting using Firebug's inspect did, I started to suspect that the javascript ID selector was broken - maybe there were multiple items in the DOM with the same ID?由于使用 javascript 设置属性似乎从未奏效，但使用 Firebug 的检查进行设置，我开始怀疑 javascript ID 选择器坏了 - 也许 DOM 中有多个项目具有相同的 ID？ The source didn't show that there were, but looping through all divs using javascript I found that that was the case.源代码没有显示有，但我发现使用 javascript 遍历所有 div 时确实如此。 Here's the function I ended up using to show the popup:这是我最终用来显示弹出窗口的函数：
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';
}
}
}
(utility function getObjectsByTagAndClass not listed) （未列出实用函数 getObjectsByTagAndClass）
Ideally I'll find out why the same item is being inserted multiple times, but I don't have control over the rendering platform, just its inputs.理想情况下，我会找出为什么多次插入同一个项目，但我无法控制渲染平台，只能控制它的输入。
So when debugging issues like this, remember to check for duplicate IDs in the DOM, which can break getElementById .因此，在调试此类问题时，请记住检查 DOM 中的重复 ID，这可能会破坏 getElementById 。
To everyone who answered, thanks for your help!感谢所有回答的人，感谢您的帮助！
解决方案3
5
找到答案：我需要使用以下内容才能使其在两个浏览器上都能正常工作：
document.getElementById('editRow').style.display = '';
解决方案4
2 2011-04-18 16:12:45
Actually I was experiencing the same problem you're describing here.实际上，我遇到了您在此处描述的相同问题。 What actually fixed my issue was changing the document properties.真正解决我的问题的是更改文档属性。
Old DOCTYPE/html spec旧的 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">
Replaced with替换为
<html>
解决方案5
1 2008-08-13 21:05:23
检查错误控制台（Firefox 3 中的“工具菜单”>“错误控制台”）以确保没有发生其他您没有看到的错误，这会阻止您的脚本工作。
解决方案6
1 2008-08-13 23:36:09
Try setting the height and width of the div, and make sure it is on top by setting its z-index higher than everything else.尝试设置 div 的高度和宽度，并通过将其 z-index 设置为高于其他所有内容来确保它位于顶部。 If the absolutely positioned div is inside an element that is relatively positioned, it's top and left location is based off the top and left of the relatively positioned element.如果绝对定位的 div 位于相对定位的元素内，则它的顶部和左侧位置基于相对定位元素的顶部和左侧。 Try putting your div just under the body element.尝试将您的 div 放在 body 元素下方。
解决方案7
1 2011-08-05 06:23:51
You must write a window.onload method:你必须写一个window.onload方法：
window.onload = document.getElementById('testdiv').style.display='inline';
Or you can also make a variable:或者你也可以创建一个变量：
var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';
解决方案8
0 2013-06-14 03:46:46
I'll give you a BIG hint:我会给你一个大提示：
<div style="..." class="..."> ... </div>
If you have something in style, then document.style will work!如果您有某种风格，那么 document.style 将起作用！ If you have something in class, it will not show up in document.style and class="..." will OVERRIDE it!如果你在课堂上有东西，它不会出现在 document.style 和 class="..." 将覆盖它！
Think about this and this will clear up SO MANY ISSUES.考虑一下，这将解决很多问题。 Just this one little understanding will RID you of this MIND VIRUS.仅此一点点的了解就可以让您摆脱这种精神病毒。 Have a good day.祝你有美好的一天。 Cheers, Ron Lentjes, LC CLS.干杯，Ron Lentjes，LC CLS。
解决方案9
0 2009-11-21 21:10:04
There is an annoying display error on Firefox 3.5 but not on IE7 or Firefox 2.0.9在 Firefox 3.5 上有一个恼人的显示错误，但在 IE7 或 Firefox 2.0.9 上没有
I have 3 DIV's position absolute - the first with plain text;我有 3 个 DIV 的绝对位置 - 第一个是纯文本； the second with a CSS menu (sucklefish type with UL and LI) and the third ditto.第二个带有 CSS 菜单（带有 UL 和 LI 的 Sucklefish 类型）和第三个同上。 The third will not display at all even though the coding has been checked and found to be perfect with W3C's HTML validator.即使已经检查了编码并发现 W3C 的 HTML 验证器是完美的，第三个也根本不会显示。
As a temporary measure, I have merged the second and third DIV's contents.作为临时措施，我合并了第二个和第三个 DIV 的内容。
Things must be bad at Mozilla when IE7 and FF2 display OK but not FF 3.5当 IE7 和 FF2 显示正常但不是 FF 3.5 时，Mozilla 的情况一定很糟糕
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.