DOM 스크립트로 주로 생성되는 페이지가 있는데, 여러 웹캠에서 이미지 테이블 (일반적인 img 요소)을 생성합니다 (애완 동물 탑승 내 HTML/DOM은 약간 녹슬지 만).IE에서가 아닌 FF로 작업하는 페이지
FF3이나 Chrome에서는 정상적으로 작동하지만 IE7에서는 정상적으로 작동하지 않습니다. 실제로 전체 표가 IE에는 표시되지 않지만 본문 배경색이 적용됩니다.
IE에서 페이지를 보면 스크립트 오류가 없으며 CSS가 적용된 것처럼 보입니다. DOM은 테이블의 모든 셀과 행을 모두 표시하여 생성됩니다.
IE 개발자 도구 모음을 사용하면 이미지 보고서를 실행해도 이미지가 표시됩니다 (표에 나타나지 않고 렌더링 된 페이지의 표가 없음에도 불구하고 - 셀의 텍스트가 isn이더라도 't rendered)
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 ; }
스타일 시트를 완전히 제거해도 아무런 효과가 없습니다. 분명히
<!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 : - 여기
는 세대 (내가 쉽게 읽을 수 있도록 일부 줄 바꿈에 넣어 시도했습니다 나는 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으로 설정하십시오! 이 대신 개방의 <script src="..." /> 다음 닫는 </script> 태그처럼 사용되는 경우
굉장한, 누가 이상한 효과가있을 거라 생각 했겠지. –
하나는 tbody를 넣는 것이 요구 사항이어야한다고 주장 할 것입니다. 파이어 폭스는 페이지의 파이어 버그 해석을 살펴보기 위해 파이어 폭스를 "퍼지"합니다. –