我有一个主要由DOM脚本创建的页面,它从几个网络摄像机生成一个图像表(普通img元素)(帮助朋友登宠物,我的HTML/DOM有点生疏)。
它在FF3或Chrome中工作得很好,但在IE7中就不行了,事实上,整个表在IE中是不可见的(但是应用了车身背景色)。
查看IE中的页面,没有脚本错误,CSS似乎被应用了OK,DOM显示了表中所有的单元格和行,它们都是生成的。
使用IE Developer工具栏,运行images甚至会显示图像(即使它们没有出现在表中,并且页面中也没有呈现所呈现的表格的证据-甚至单元格中的文本也没有呈现)
在查看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元素的响应似乎是整个问题--这似乎甚至将DOM!中的图像宽度和高度设置为0。
发布于 2008-09-29 06:21:31
我发现的一个问题是,在IE中,如果使用document.createElement()动态创建表,则需要table(tbody(tr(tds)))。如果没有tbody,表将不会显示。
发布于 2008-09-29 06:13:25
让我感到困惑的是IE对<script>标记的错误处理,当它像<script src="..." />一样使用时,而不是打开一个,然后是一个关闭的</script>标记。我似乎经常遇到这种情况,因为我倾向于使用XSLT来生成HTML输出。
但是,第一步是在某个地方发布一个页面显示不正确的示例。它不需要包含任何真实的数据,只是足以显示问题。没有一个有效的例子,谁也猜不出问题是什么。
发布于 2008-09-29 06:16:17
您从将CSS重置到公共基础开始吗?看看CSS重置或YUI重置CSS。(但如果没有一个示例页面,我们将猜测实际问题是什么。)
https://stackoverflow.com/questions/147684
复制相似问题