Я успешно показываю фотографию в Firefox версии 22 - в двух разных тегах img - один из тегов img не имеет установленной ширины или высоты CSS, поэтому изображение отображается в исходном размере.

Второй тег img задается стилем CSS как 60 пикселей на 60 пикселей.

Когда я устанавливаю 'innerHTML' этих двух тегов img, в Firefox я вижу изображение исходного размера и такое же изображение, уменьшенное, чтобы поместиться в тег img размером 60 на 60 пикселей.

В IE версии 10.0.9 я просто не вижу ничего во втором налоге на img, который через CSS установлен как 60 на 60 пикселей.

Это тот же самый код, который выполняется. Что мне нужно сделать, чтобы IE показывал изображение в теге img размером 60 на 60 пикселей, которого здесь нет в моем коде?

Между прочим, приведенный ниже код создается в файле PHP - я использую подход «скрытый iframe» для загрузки, а затем отображения изображения на веб-странице - приведенный ниже код создается в файле PHP, а затем выводит то, что вы видите ниже. в мой скрытый iframe на моей html-странице, поэтому вы видите здесь код, получающий родительский документ iframe:

<script language="JavaScript" type="text/javascript">
var parDoc = parent.document;

parDoc.getElementById('justOpenedImage').innerHTML = 
   '<div><img src=\'http://localhost/thesite/aPhoto.jpg\' /></div>';

parDoc.getElementById('60by60').innerHTML = 
  '<div><img class="60by60Image" src=\'http://localhost/thesite/aPhoto.jpg\' /></div>';
</script>

Вот CSS-класс 60by60Image:

 .60by60Image
 {
    border: 2px solid green;   
    width: 60px; 
    height: 60px;
    display: inline-block;
 }

Вот HTML на странице:

     <!-- THE ORIGINAL-SIZED IMAGE APPEARS FINE HERE IN BOTH IE AND FF -->
     <div id="justOpenedImage"></div>


     <!-- THE SMALLER IMAGE APPEARS HERE IN FIREFOX BUT NOT IN IE -->
     <div>
         <img class="60by60Image"  id="60by60" src="" />
     </div>

Это нормально работает в Firefox, но в IE не удается отобразить меньшую версию изображения 60 на 60 - не знаю почему.

0
CFHcoder 3 Авг 2013 в 20:28
Это Internet Explorer. Забудь об этом.
 – 
Cole Tobin
3 Авг 2013 в 20:29
2
Но это Internet Explorer 10. Он намного лучше своих злых собратьев.
 – 
JiminP
3 Авг 2013 в 20:30
Вы устанавливаете innerHTML изображения (вместо этого у него не должно быть этого свойства . Try setting the innerHTML` оболочки <div>.
 – 
AmazingDreams
3 Авг 2013 в 20:32
Могут ли имена классов начинаться с цифр в IE? Я думал, что это вещь ...
 – 
Phix
3 Авг 2013 в 20:32
1
IE (все) = большая боль в «сам знаешь что». (стон)
 – 
Funk Forty Niner
3 Авг 2013 в 20:39

1 ответ

Лучший ответ

Вы устанавливаете innerHTML изображения. После выполнения вашего скрипта дерево документа выглядит примерно так:

 <div>
     <img class="60by60Image"  id="60by60" src="">
         <div><img class="60by60Image" src='http://localhost/thesite/aPhoto.jpg' /></div>
     </img>
 </div>

Я думаю, что IE просто не справляется с этим. По крайней мере, это не валидный HTML.

Вы можете исправить это, добавив атрибут id="60by60" к родительскому div и удалив его из img. Разрешение javascript изменять innerHTML div вместо изображения.

<div id="60by60">
     <img class="60by60Image" src="">
</div>

Или измените атрибут изображения src.

parDoc.getElementById('60by60').src = 'http://localhost/thesite/aPhoto.jpg';
4
AmazingDreams 3 Авг 2013 в 20:37
Я изменил свой код для изображения 60 на 60 пикселей, чтобы использовать ваше второе предложение - parDoc.getElementById ('60by60'). Src = 'http // localhost / thesite / aPhoto.jpg \'; и это работает как в Firefox, так и в IE - спасибо.
 – 
CFHcoder
3 Авг 2013 в 20:46