在FF中而不是在IE中从哪里开始的页面工作
我有一个页面,该页面主要是由DOM脚本创建的,该页面从多个网络摄像头生成一张图像表(正常img元素)(用宠物寄宿帮助一个朋友,而我的HTML / DOM有点生锈)。
它可以在FF3或者Chrome中正常运行,但在IE7中则不能,实际上,整个表格在IE中不可见(但会应用主体背景色)。
查看IE中的页面,没有脚本错误,CSS似乎已被应用,并且DOM似乎显示了表中所有生成的单元格和行。
使用IE Developer工具栏,运行"图像"报告甚至可以显示图像(即使它们没有出现在表格中,并且即使在单元格中的文本没有被呈现的情况下,页面中也没有显示该表格的证据)
在查看img元素并使用跟踪样式功能时,我一次看到img元素全部显示: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) ;
动态构建表时,关于require TBODY元素的响应似乎是整个问题,这似乎甚至将DOM中的图像宽度和高度设置为0!
解决方案
总是让我困惑的是,IE在使用像<script src =" ..." />`而不是先开后是结束的</ script>标记时对IE的<script>标签处理不当。我似乎碰到了很多东西,因为我倾向于使用XSLT生成HTML输出。
不过,第一步是在某处张贴无法正确显示的页面示例。它不必包含任何实际数据,仅足以显示问题。没有有效的例子,没人会猜出问题出在哪里。
我们是否已开始将CSS重置为通用基础?看一下CSS Reset或者YUI Reset CSS。 (但如果没有示例页面可供查看,我们将猜测实际的问题是什么。)
我发现的一个陷阱是,在IE中,如果使用document.createElement()动态创建表,则需要table(tbody(tr(tds)))。没有肢体,该表将不会显示。
资源管理器暴露!在positioniseverything.net上列出了仅在IE中发现的错误。