IEではなくFFで動作するページ、どこから始めればよいか
https://stackoverflow.com/questions/147684
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
主にDOMスクリプトによって作成されたページがあり、いくつかのウェブカメラから画像の表（通常のimg要素）を生成します（ペット搭乗の友人を助け、私のHTML / DOMは少しさびています）。
FF3またはChromeでは正常に動作しますが、IE7では動作しません。実際、IEではテーブル全体が表示されません（ただし、本体の背景色が適用されます）。
IEのページを見ると、スクリプトエラーはなく、CSSが適用されているように見え、DOMが表示され、すべての生成されたテーブル内のすべてのセルと行が表示されます。
IE Developer Toolbarを使用して、画像レポートを実行すると、画像も表示されます（表に表示されず、ページに表が表示されている証拠はありません-セルのテキストも表示されません） tレンダリング済み）
img要素を見て、トレーススタイル機能を使用すると、一度、img要素がすべて表示されていることがわかりました：なし、インラインスタイルと言いましたが、これを行うコードまたはスタイルシートには何もありません。スタイルシートのすべてのテーブル要素に明示的なエントリを追加し始めたため、その問題は解消されたようです。
どこから始めますか
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ツールバーの書式設定をおaびします-読みやすくするためにいくつかの改行を入れようとしました）：
<!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に設定するようです！
解決
1つの落とし穴は、IEでdocument.createElement()を使用してテーブルを動的に作成する場合、table(tbody(tr(tds)))が必要なことです。 tbodyがないと、テーブルは表示されません。
他のヒント
常に私を襲う落とし穴は、＆lt; script src =＆quot; ...＆quot; /＆gt; 開始タグと終了＆lt; / script＆gt; タグの代わりに。 XSLTを使用してHTML出力を生成する傾向があるため、この問題に頻繁に遭遇するようです。
ただし、最初のステップは、適切に表示されないページの例をどこかに投稿することです。問題を示すのに十分なだけで、実際のデータを含める必要はありません。実用的な例がなければ、誰も問題が何であるかを推測することはできません。
CSSを共通ベースにリセットすることから始めましたか？ CSSリセットまたは YUI CSSのリセット。 （ただし、見るページの例がなければ、実際の問題が何であるかを推測することになります。）
Explorer Exposed！ positioniseverything.net には、IEでのみ見つかったバグがリストされています。
