JQuery Rotate - проблемы с IE7 и IE8

Я использую JQuery Rotate для поворота изображения вокруг метра, и он отлично работает, но в IE7 и IE8 он подталкивается примерно на 200 пикселей и имеет черный ход/границу вокруг изображения.

Я использую jQueryRotate3.js, который работает, но позиция выключена и не уверен, откуда идет черная граница?

JS:

            var start = 0;
        // Sets the Value of the City for now   
            var angle = 1 + Math.floor(Math.random() * 180);

            $("img.pointer").rotate({
                 angle: start,
                 animateTo: angle,
                 easing: $.easing.easeInOutSine
            })

HTML:

<div class="city-details">
   <div class="details">
     <img class="pointer" src="http://demo.omnigon.com/christian_bovine/shamelesscity/images/pointer.png" alt="" />
    </div>
</div>

Вы можете увидеть код здесь: http://jsfiddle.net/xtian/6gcS8/1/

Мне бы очень хотелось, чтобы эта работа работала в IE7 и IE8.

Ответ 1

jsFiddle DEMO

Я посмотрел в JQuery Rotate v3.1 script вы используете и разреженным только с минимальным он должен получить работу для IE, который хорошо рассмотреть.

Просто добавьте два правила CSS для top и left на основе ваших значений margin-top и margin-left, чтобы он работал в IE-браузерах не CSS3.

Пример:

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    top: 211px;
    left: 48px;    
    margin: 211px 0 0 48px;
}

Обратите внимание: нет необходимости устанавливать CSS position, так как этот script устанавливает его в absolute, который перенаправляет все, что вы предоставляете.

Метод исправления проблемы черная рамка в браузерах IE заключается в том, чтобы установить свойство background-color на значение, соответствующее фону... ожидать, что в вашем случае у вас есть 3 цвета синего наряду с белым в средней части... так что это не очень хорошая идея.

Вместо этого используйте наиболее распространенное решение, которое является PNG8 Filetype Image with Transparency, как описано в этом SO-ответ.

Ответ 2

Мне удалось заставить его работать, удалив поле и установив место размещения с относительным позиционированием, например:

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    margin: 211px 0 0 48px;
}

к

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    position: relative;
    top: 218px;
    left: 50px;
}

У меня нет установленного ie7/8, но я это работаю с настройками просмотра совместимости IE9, которые показали неправильную иглу в оригинальной скрипке (и она по-прежнему ведет себя так, как ожидалось, в Chrome и Firefox).

Попробуйте эту обновленную скрипту и дайте мне знать, если у вас все еще есть проблемы: http://jsfiddle.net/6gcS8/4/

Ответ 3

Выполнение таких действий, как поворот или затухание в IE7/8, всегда будет иметь нежелательные побочные эффекты, поскольку оно выходит за рамки стандартных возможностей браузера. В любом другом браузере он мертв легко, но для старого IE ваш плагин jQuery будет делать некоторые довольно взломанные вещи, чтобы заставить его работать. Этот хакерский материал может работать в некоторых случаях, но имеет тенденцию быть очень хрупким и легко сломанным.

Механизм вращения IE очень неуклюж. Описанная проблема изображения, перемещаемого на 200 пикселей, звучит как точка центра вращения, может быть неправильной. Это то, с чем я столкнулся, когда пытаюсь работать с вращением в IE. Я бы ожидал, что ваш плагин jQuery будет иметь дело с этим прозрачно, но если он ошибается, я не уверен, как вы его исправите, не обойдя плагин полностью или используя другое изображение для IE, которое на 200 пикселей выше или что-то как это.

На черной границе это может быть проблемой при обработке альфа-канала на изображении PNG. Вы можете подтвердить это, используя вместо этого изображение GIF (хотя оно не будет выглядеть так хорошо).

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

Глядя на ваш пример jsFiddle, кажется, что вы делаете это, чтобы рисовать и анимировать датчик типа спидометра.

Могу ли я предложить альтернативный подход, который устраняет необходимость беспорядочного взаимодействия с вращающимися элементами DOM.

Существует библиотека Javascript под названием Raphael, которая рисует векторную графику. Он работает во всех браузерах, включая старые версии IE. Рафаэль очень легко нарисовать быстродействующий спидометр. Фактически, я предоставил 4-строчный JS script в другом ответе здесь, на SO, чтобы сделать именно это. См. Здесь: Рисование полуметра/спидометра (пример использования JavaScript для холста или Java). Вы можете взять этот script, изменить его, чтобы использовать существующее фоновое изображение, и бинго, рабочий показатель скорости во всех браузерах, без каких-либо ошибок, связанных с попыткой сделать IE, делает что-то не для.

Надеюсь, что это поможет.