我试图只在 .link.box.gradient 上添加渐变，但在 ie7 中它会在 .link.box.gradient 和 .style 上添加。盒子.渐变
<!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似乎可行，但我不想搬出去。
为什么会这样？我该如何修复这个错误？
最佳答案
删除了原来的错误答案
编辑 1
奇怪 - 决定这可能是旧版本的 IE 处理某些元素的方式(如 <script /> )所以尝试了 a non-jQuery solution .
似乎有效!
编辑 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>');
}
}
关于javascript - 使用 javascript 添加 CSS 渐变 - IE7 中的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4492545/