页面在 FF 中工作，而不是在 IE 中，从哪里开始答案

【问题标题】：Page working in FF, not in IE, where to start页面在 FF 中工作，而不是在 IE 中，从哪里开始
【发布时间】：2010-09-13 22:39:56
【问题描述】：

我有一个主要由 DOM 脚本创建的页面，它从多个网络摄像头生成图像表（正常的 img 元素）（帮助朋友寄养宠物，我的 HTML/DOM 有点生疏）。

在 FF3 或 Chrome 中可以正常工作，但在 IE7 中不行，实际上整个表格在 IE 中不可见（但应用了正文背景颜色）。

在 IE 中查看页面，没有脚本错误，CSS 似乎应用 OK，DOM 似乎显示了表格中的所有单元格和行，这些都是生成的。

使用 IE 开发工具栏，运行图像报告甚至会显示图像（即使它们没有出现在表格中，也没有证据表明页面中的表格已呈现 - 即使单元格中的文本也不是' t 渲染）

在查看 img 元素并使用跟踪样式功能时，有一次，我看到所有 img 元素都有 display : none，它说的是内联样式，但我的代码或样式表中没有任何内容可以做到这一点。当我开始为样式表中的每个表格元素添加显式条目时，这个问题似乎已经消失了。

从哪里开始？

body { background-color : gray ; color : white ; margin : 0 ; font-family : Verdana, "lucida console", arial, sans-serif ; }
#CameraPreviewParent { text-align : center ; width : 100% ; }
#CameraTable { text-align : center ; width : 100% ; }
#CameraLiveParent { text-align : center ; margin : 50px ; }
#CameraLiveHeading { color : white ; }
td.CameraCell { text-align : center ; }
img.CameraImage { border : none ; }
a:link, a:visited, a:active, a:hover { text-decoration : none ; color : inherit ; }
table#CameraTable { color : white ; background-color : gray ; }
td.CameraCell { color : white ; background-color : gray ; }

完全删除样式表没有任何效果。

这是生成后页面的代码（对于 DOM 工具栏的格式，我深表歉意 - 我已尝试添加一些换行符以使其更易于阅读）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=windows-1252">
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT src="cameras.js" type="text/javascript"> </SCRIPT>
<SCRIPT type="text/javascript">
function CallOnLoad() {
document.title = PreviewPageTitle ;         BuildPreview(document.getElementById("CameraPreviewParent")) ;
}
</SCRIPT>
</HEAD>
<BODY>
<!-- Any HTML can go here to modify page content/layout -->
<DIV id="CameraPreviewParent">
<TABLE id="CameraTable" class="CameraTable">
<TR id="CameraRow0" class="CameraRow">
<TD id="CameraCell0" class="CameraCell"><A id="CameraNameLink0" href="http://192.168.4.3:801" class="CameraNameLink">Luxury Suite 1 (1)</A><BR /><A id="CameraLink0" href="camlive.html?camIndex=0" class="CameraLink"><IMG id="CameraImage0" title="Click For Live Video from Luxury Suite 1 (1)" height="0" alt="Click For Live Video from Luxury Suite 1 (1)" src="http://192.168.4.3:801/IMAGE.JPG" width="0" class="CameraImage" /></A></TD>
<TD id="CameraCell1" class="CameraCell"><A id="CameraNameLink1" href="http://192.168.4.3:802" class="CameraNameLink">Luxury Suite 2 (2)</A><BR /><A id="CameraLink1" href="camlive.html?camIndex=1" class="CameraLink"><IMG id="CameraImage1" title="Click For Live Video from Luxury Suite 2 (2)" height="0" alt="Click For Live Video from Luxury Suite 2 (2)" src="http://192.168.4.3:802/IMAGE.JPG" width="0" class="CameraImage" /></A></TD>
</TR>
</TABLE>
</DIV><!-- This element is used to hold the preview -->
<!-- Any HTML can go here to modify page content/layout -->
</BODY>
</HTML>

显然，插入图像宽度和高度的 DOM 代码在 IE 中无法正常工作：

var PhotoWidth = 320 ;
var PhotoHeight = 240 ;

var image = document.createElement("img") ;
image.setAttribute("id", "CameraImage" + camIndex) ;
image.setAttribute("class", "CameraImage") ;
image.setAttribute("src", thisCam.ImageURL()) ;
image.setAttribute("width", PhotoWidth) ;
image.setAttribute("height", PhotoHeight) ;
image.setAttribute("alt", thisCam.PreviewAction()) ;
image.setAttribute("title", thisCam.PreviewAction()) ;
link.appendChild(image) ;

动态构建表格时需要 TBODY 元素的响应似乎是整个问题 - 这似乎甚至将 DOM 中的图像宽度和高度设置为 0！

【问题讨论】：

标签： html css dom

【解决方案1】：

我发现的一个问题是，在 IE 中，如果您使用document.createElement() 动态创建表，则需要table(tbody(tr(tds)))。如果没有tbody，表格将不会显示。

【讨论】：

太棒了，谁能想到会有这么奇怪的效果。
有人会争辩说，将 tbody 放在那里应该是一个要求，如果你看一下 firebugs 对页面的解释，firefox 会“捏造”它们。

【解决方案2】：

总是让我感到困惑的是 IE 对 <script> 标记的错误处理，当它像 <script src="..." /> 一样使用时，而不是打开然后关闭 </script> 标记。我似乎经常遇到这种情况，因为我倾向于使用 XSLT 来生成 HTML 输出。

不过，第一步是在某处发布无法正确显示的页面示例。它不必包含任何真实数据，足以显示问题。没有工作示例，没有人能够猜出问题所在。

【讨论】：

是的，我早就发现了。

【解决方案3】：

您是否已开始将 CSS 重置为通用基础？看看CSS Reset 或YUI Reset CSS。（但没有示例页面可供查看，我们将猜测实际问题是什么。）

【讨论】：

【解决方案4】：

Explorer Exposed! on positioniseverything.net 列出了仅在 IE 中发现的错误。

【讨论】：