在Firefox、Opera和Safari中，样式显示不起作用（IE7可以）。

Question

在Firefox、Opera和Safari中，样式显示不起作用（IE7可以）。

15

我有一个绝对定位的 div，希望当用户点击一个链接时它会显示。该链接的 onclick 调用了一个 JavaScript 函数，将 div 的 display 设置为 block（也尝试过：""、inline、table-cell、inline-table 等）。这在 IE7 中效果很棒，在我尝试的其他所有浏览器中都不起作用（FF2, FF3, Opera 9.5, Safari）。

我尝试在调用前后添加警告，它们显示 display 已从 none 更改为 block，但是 div 并未显示。

如果我使用 Firebug 的 HTML 检查器更改 display 值，可以在 FF3 中使 div 显示出来（但不能通过 Firebug 的控制台运行 JavaScript 来实现）- 因此我知道它不仅仅只是在屏幕外显示等问题。

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

使用不同的 doctype（XHTML 1、HTML 4 等）
使用 visibility visible/hidden 代替 display block/none
使用内联 JavaScript 代替函数调用
从不同的计算机测试

你有什么想法，是什么原因导致这种情况？

- palmsey

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>

- buyutec

我曾经遇到过这个问题，但是我使用了IE的技巧，直接通过id调用元素而不事先查找它： testDiv.style.display = 'block'; - chama

5

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

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

- Preethi

这个方法对我解决了一个类似的问题，Safari没有设置显示为块状：我的解决方法是执行 document.getElementById('editRow').style.display = ''; 然后执行 document.getElementById('editRow').style.display = 'block'; - 在IE11、Chrome和Safari 2016年8月最新版本上测试通过。 - Josh Greifer

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>

- Neal Connolly

1

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

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

你也可以创建一个变量：

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

- fadzzz

1

检查错误控制台（Firefox 3 中的工具菜单>错误控制台）以确保没有其他错误发生，这些错误可能会阻止您的脚本正常工作。

- DannySmurf

1

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

- Lance Fisher

0

我会给你一个很大的提示：

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

如果你有样式，那么document.style会起作用！如果你有类，它不会出现在document.style中，而class="..."将覆盖它！

想一想，这将解决很多问题。只要理解这个小问题，就能摆脱这种心理障碍。祝你有美好的一天。谢谢，Ron Lentjes，LC CLS。

- Ron Lentjes

0

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

我有三个 DIV 的绝对位置 - 第一个是纯文本；第二个是带有 CSS 菜单（sucklefish 类型，带有 UL 和 LI）；第三个同样如此。即使已经检查过编码并使用 W3C 的 HTML 验证器发现它们完美无缺，但第三个 DIV 仍然无法显示。

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

当 IE7 和 FF2 显示正常而 FF 3.5 却不行时，Mozilla 的事情肯定很糟糕。

- Paul

那么你的标记肯定更糟糕，因为如果你的标记在IE中工作而在FF中不工作，那肯定是你的标记有问题。但是，请开启自己的线程并展示给我们看，这样我们才能帮你修复。 - Rob

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- palmsey · Accepted Answer

由于使用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';        
    }
  }
}

(未列出utility function getObjectsByTagAndClass)

理想情况下，我会找出为什么同一项被多次插入，但我无法控制渲染平台，只能控制其输入。

因此，在调试此类问题时，请记得检查DOM中是否有重复的ID，这可能会破坏getElementById。

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