使用 javascript 添加 CSS 渐变 - IE7 中的错误

发布于 2024-10-08 22:20:37 字数 1195 浏览 4 评论 0原文

我试图仅在 .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/ 一件奇怪的事情是，当我从 javascript 中移出 .link.box{height:100px;width:100px;} 时，您可以在此处看到 http://jsfiddle.net/Zhvpy/1 似乎可行，但我不想搬出去。

为什么会这样呢？我该如何修复这个错误？

原文

I am trying to add gradient on only .link.box.gradient but in ie7 it add on .link.box.gradient and .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>

You can see here too, http://jsfiddle.net/Zhvpy/
One strange thing is when i move out .link.box{height:100px;width:100px;} from javascript as you can see here http://jsfiddle.net/Zhvpy/1 it seems to work, but I dont want to move out.

Why is it like this? How can I fix this bug?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

穿越时光隧道 2024-10-15 22:20:37

删除了原来的错误答案

编辑 1

奇怪 - 决定这可能是旧版本 IE 处理某些元素的方式（例如

编辑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>');
    }
}

removed original incorrect answer

EDIT 1

Odd - decided it might be the way older versions of IE handle certain elements (like <script />) so tried a non-jQuery solution.
Seems to work!

EDIT 2

Added this to your full script - outputs different results which are more in line with what IE8 outputs

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>');
    }
}

回复收藏 0 原文

~没有更多了~