Страница работает в FF, а не в IE, с чего начать

StackOverflow https://stackoverflow.com/questions/147684

  •  02-07-2019
  •  | 
  •  

Вопрос

У меня есть страница, которая в основном создана с помощью сценария DOM, который генерирует таблицу изображений (обычные элементы img) с нескольких веб-камер (помогаю другу с размещением домашних животных, а мой HTML/DOM немного заржавел).

Он отлично работает в FF3 или Chrome, но не в IE7. Фактически, вся таблица не видна в IE (но применяется цвет фона тела).

Глядя на страницу в IE, ошибок сценария нет, кажется, что CSS применен нормально, а в DOM отображаются все сгенерированные ячейки и строки таблицы.

Используя панель инструментов разработчика IE, при запуске отчета об изображениях даже отображаются изображения (хотя они не отображаются в таблице и нет никаких свидетельств того, что таблица на странице визуализируется - даже текст в ячейках не отображается).

Просматривая элементы img и используя функцию стиля трассировки, я однажды увидел, что все элементы img имеют display:нет, и там написано встроенный стиль, но в моем коде или таблице стилей нет ничего, что могло бы это сделать.Эта проблема, похоже, исчезла, когда я начал добавлять явные записи для каждого элемента таблицы в моей таблице стилей.

Когда начать?

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 при динамическом построении таблиц, по-видимому, является всей проблемой - похоже, что ширина и высота изображения даже устанавливаются равными 0 в DOM!

Это было полезно?

Решение

Я обнаружил одну ошибку: если в IE вы динамически создаете таблицы с помощью document.createElement(), тебе нужно table(tbody(tr(tds))).Без tbody, таблица не будет отображаться.

Другие советы

Меня всегда сбивает с толку неправильное обращение IE с <script> тег, когда он используется как <script src="..." /> вместо открытия, а затем закрытия </script> ярлык.Кажется, я часто с этим сталкиваюсь, потому что обычно использую XSLT для генерации вывода HTML.

Однако первым шагом было бы опубликовать где-нибудь пример страницы, которая отображается неправильно.Он не обязательно должен содержать какие-либо реальные данные, их достаточно, чтобы показать проблему.Никто не сможет догадаться, в чем проблема, без рабочего примера.

Вы начали с сброса CSS на общую базу?Посмотри на Сброс CSS или YUI Сбросить CSS.(Но без примера страницы мы будем догадываться, в чем заключается реальная проблема.)

Исследователь разоблачен!на сайте Positioniseverything.net перечисляет ошибки, найденные только в IE.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top