IE7のJavaScript -bugを使用してCSSグラデーションを追加します
-
12-10-2019 - |
質問
グラデーションを追加しようとしています .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/奇妙なことの1つは、.link.box {height:100px; width:100px;}をjavascriptから移動するときです。 http://jsfiddle.net/zhvpy/1 うまくいくようですが、私は引っ越したくありません。
なぜこのようなのですか?このバグを修正するにはどうすればよいですか?
解決
元の誤った回答を削除しました
編集1
ODD -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>');
}
}
所属していません StackOverflow