Получение изображения в центре в IE, когда это происходит в Chrome и FF

0

У меня есть изображение, которое отображается при щелчке значка. Изображение СЛЕДУЕТ центрировать вертикально и горизонтально, и делает это отлично в Chrome и FF, но по какой-то причине не удается получить правильные размеры полей в IE. Функция on click javascript У меня есть формат CSS для изображения, он изменит marginLeft на половину высоты, а marginTop на половину ширины. Ниже приведен код:

$('.preview').click(function(){
    var img = $("#<%=imgFull.ClientID%>");
    img.attr("src", $(this).attr('fullImg'));
    img.attr("Visible", "true");

    img.load(function(){
        img.css({
            top: "50%",
            left: "50%",
            marginTop: "-" + (img.width()/2) + "px",
            marginLeft: "-" + (img.height()/2) + "px"
    }, false);
});
    $("#overlay").show();
    $("#overlayContent").show();
});

Есть ли что-то, что мне не хватает в IE? Я не привык к тому, чтобы использовать браузер для его поддержки. Моя бывшая клиентская база была строго Chrome и FF. Обрабатываемые изображения - 320x240, поэтому поля должны быть

margin-top: -160px;
margin-left: -120px;

Вместо этого они

margin-top: -14px;
margin-left: -15px;
  • 0
    два вопроса: 1 // Ваш сайт на 100% действителен. 2 // Вы специально установили img для display:block .
  • 1
    Chrome и Firefox действительно прощают неправильную разметку, то есть не прощают.
Показать ещё 3 комментария
Теги:
internet-explorer

1 ответ

2
Лучший ответ

http://www.w3.org/TR/html-markup/img.html#img-display

Обычно изображения будут отображаться как встроенный блок по умолчанию, что добавляет line-height в смесь line-height элементов/высоты поля. Объявление изображения для display:block в css удаляет высоту строки из вычисленной высоты элементов.

Сообщество Overcoder
Наверх
Меню