Поворот jQuery - проблемы 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.

Источник

3 ответа

Решение

jsFiddle DEMO

Я посмотрел на используемый вами скрипт jQuery Rotate v3.1, и он немногочислен с минимальными затратами, необходимыми для выполнения работы для 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 так как этот сценарий устанавливает его absolute который отменяет все, что вы предоставляете.

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

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

Источник

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

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

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

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

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

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

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

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

Источник

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

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/

Источник
Другие вопросы по тегам