J'ai une page qui est en grande partie créée par le script DOM, qui génère une table d'images (éléments img normales) à partir de plusieurs webcams (aider un ami avec un animal de compagnie d'embarquement et mon HTML/DOM est un peu rouillé).Page de travail en FF, pas en IE, par où commencer
Cela fonctionne très bien dans FF3 ou Chrome, mais pas dans IE7, En fait, toute la table n'est pas visible dans IE (mais la couleur de fond du corps est appliquée).
En regardant la page dans IE, il n'y a pas d'erreurs de script, le CSS semble être appliqué, et le DOM apparaît pour montrer toutes les cellules et lignes de la table, qui sont toutes générées. En utilisant la barre d'outils IE Developer, l'exécution du rapport Image affiche même les images (même si elles n'apparaissent pas dans le tableau et qu'il n'y a aucune évidence que la table soit rendue dans la page - même le texte dans les cellules isn En regardant les éléments img et en utilisant la fonction de style de trace, à un moment donné, j'ai vu que les éléments img avaient tous un affichage: aucun, et il a dit le style en ligne, mais il n'y a rien dans mon code ou feuille de style qui fait cela. Ce problème semble avoir disparu lorsque j'ai commencé à ajouter des entrées explicites pour chaque élément de la table dans ma feuille de style.
Par où commencer?
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 ; }
La suppression complète de la feuille de style n'a aucun effet.
Voici le code de la page après génération (je présente mes excuses pour la mise en forme de la barre d'outils DOM - J'ai essayé de mettre dans certains linefeeds pour le rendre plus facile à lire):
<!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>
Apparemment, les DOM le code qui insère avec la largeur et la hauteur des images ne fonctionne pas correctement dans 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) ;
la réponse sur le besoin d'élément TBODY lorsque les tables de construction dynamique semble être le problème dans son ensemble - cela semble même définir l'image largeur et hauteur à 0 dans le DOM!
Génial, qui aurait pensé que ça aurait un effet si étrange. –
on pourrait argumenter mettre tbody là-dedans devrait être une exigence, firefox "fudges" eux si vous regarderez interprétation firebugs de la page. –