изображение отображается правильно в хроме, но не в Firefox или IE

Так в html.erb документе У меня есть таблица с в нем, и в этой таблице изображение масштабируется до размеров колонки следующим образом:изображение отображается правильно в хроме, но не в Firefox или IE

<table width="900" border="0" align="center" valign="top"> 
     <tr> 
     <td><img src="someimage.gif" width="35%" height="95%" /></td> 
     <td>a whole bunch more html content here</td> 
     </tr> 
    </table>

Он отлично работает в Chrome, но по какой-то причине, когда я загружаю страницу в IE или Fire Fox, она показывает изображение в исходном размере, а не масштабируется до размера столбца, как должно быть. Я попытался удалить свойства роста и веса вместо того, чтобы заменить их с некоторыми в строке CSS, как это:

<img src="someimage.gif" style="height:95%;width:35%"/>

, но я снова столкнуться с той же проблемой. Работает отлично в Chrome, но не в двух других. Кто-нибудь знает, что может вызвать проблему совместимости и что я могу сделать, чтобы исправить или обойти ее?

Редактирование: Возможно, я должен был упомянуть, что я попытался определить размер изображений как во внешнем файле CSS, используя абсолютные и относительные аргументы для позиции, за которыми следуют значения пикселей для размера, а затем после удаления этого CSS-код в разделе высоты и ширины тегов HTML5 img. В обоих случаях масштабирование в любом браузере приводило к общему взгляду на сайт, поэтому я переключился на использование процентных значений.

источник

2012-01-27 Lee Abraham

Вам не хватает 't' в' heigh = '95% ''; вы уверены, что это не является причиной проблемы? –

Это была опечатка в этом посте. Это не проблема в самом коде. Спасибо, что указали на это, но мне нужно научиться проверять до начала публикации. –

Браузер не может определить ширину столбцов, пока не определит (ширину) его содержимое. И в вашем случае ширина содержимого зависит от ширины столбца. Вы получите неожиданные результаты в зависимости от браузера и в зависимости от того, присутствует ли изображение в кеше или нет.

Укажите ширину и высоту столбца, и вы получите ожидаемые, согласованные результаты. See demo here.

источник

2012-01-30 09:18:06

для Firefox вы можете попробовать размер CSS фона, например

<td> 
    <div style="background: url(someimage.gif); background-size: 100% 100%; width: 35%; height: 95%;"> 
    </div> 
</td>

или вы могли бы попробовать JQuery, но ваш HTML должен будет выглядеть следующим образом

<table width="900" border="0" align="center" valign="top"> 
    <tr class="image_tr"> 
    <td class="image_td"><img class="image" src="someimage.gif"/></td> 
    <td>a whole bunch more html content here</td> 
    </tr> 
</table>

Теперь здесь является JQuery

$(document).ready(function(){ 
    var height_percent = $("table .image_tr").height()/100; 
    var width_percent = $("table .image_td").width()/100; 

    $(".image").height(height_percent * 95); 
    $(".image").width(width_percent * 35) 
});

источник

2012-01-27 23:10:09 theliberalsurfer

' . . . . . . Такая же проблема, как раньше. Работает в Chrome, а не в FireFox или Internet Explorer. Однако у меня есть внешний файл CSS. Я попытаюсь манипулировать изображением. –

вы также можете заменить тег img и заменить его шириной div. Посмотри на мой пост. – theliberalsurfer

Вы должны попытаться определить ширину td в таблице, я нахожу их часто беспорядочными в Internet explorer :)

источник

2012-01-28 00:39:10

Все браузеры масштабируют изображение, но результаты отличаются, так как размер ячейки меняется. Вы можете видеть это, если вы меняете border="0" на border="1". Различные браузеры применяют различные алгоритмы распределения столбцов к таблицам, особенно в сложных случаях, подобных этому. Вы запрашиваете масштабирование изображения до 35% доступной ширины, в основном ширину ячейки, а ширина ячейки, в свою очередь, зависит от содержимого ячейки, между прочим. Аналогичные соображения относятся к высоте.

Чтобы исправить это, вам необходимо указать желаемый внешний вид в терминах, которые не зависят от конкретных алгоритмов форматирования таблицы конкретного браузера.

источник

2012-01-28 06:20:38

изображение отображается правильно в хроме, но не в Firefox или IE

ответ

Смежные вопросы