Добавить CSS градиент с помощью JavaScript - ошибка в IE7 - PullRequest
Новая
       6

Добавить CSS градиент с помощью JavaScript - ошибка в IE7

0 голосов
/ 20 декабря 2010

Я пытаюсь добавить градиент только на .link.box.gradient, но в ie7 он добавляет .link.box.gradient и .style.box.gradient

<!DOCTYPE html>
<html lang="sv">
    <head>
    <title></title>
        <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
        <script>
            jQuery(function ($) {
                $('head').append("<style>.link.box{height:100px;width:100px;}.link.box.gradient{filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000',EndColorStr='#ffffff');}</style>");
            });
        </script>
    </head>
    <body>
        <div class="style box gradient">Gradient (style-tag)</div>
        <div class="link box gradient">Gradient (link-tag)</div>
    </body>
</html>

Вы также можете увидеть здесь, http://jsfiddle.net/Zhvpy/ Одна странная вещь, когда я выхожу .link.box {height: 100px; width: 100px;} из javascript, как вы можете видеть здесь http://jsfiddle.net/Zhvpy/1 это работает, но я не хочу уходить.

Почему это так? Как я могу исправить эту ошибку?

1 Ответ

2 голосов
/ 20 декабря 2010

удален исходный неправильный ответ

РЕДАКТИРОВАТЬ 1

Нечетный - решил, что это может быть способ, которым старые версии IE обрабатывают определенные элементы (например, <script />), поэтому попытался решение не-jQuery . Кажется, работает!

РЕДАКТИРОВАТЬ 2

Добавил это в ваш полный скрипт - выводит разные результаты, которые в большей степени соответствуют тому, что IE8 выводит 

function appendStyle(element, cssObj) {
    //$('#a').append($('<span/>').text(cssObjToText(cssObj)));
    if ($.browser.version == 7) {
        var head = document.getElementsByTagName('head')[0],
            style = document.createElement('style'),
            rules = document.createTextNode(cssObjToText(cssObj));

        style.type = 'text/css';

        head.appendChild(style);

        style.styleSheet.cssText = rules.nodeValue;
    }
    else {
        element.after('<style class="css-finalized">' + cssObjToText(cssObj) + '</style>');
    }
}
...