Question

您好我使用javascript样式表对象，具有特定的样式并将其置于dom准备状态。当我完全执行我的代码IE崩溃时。

问题是在页面加载后设置了这种样式的UL。如果我在页面加载之前放置styleSheet.cssText = css;，则每个都是正确的。如果我删除<DIV>f中的字符f，一切正常。我需要在页面加载后使用我的代码。是否有任何建议可以解决这个问题？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>test</title>
<script type="text/javascript" src="./jquery-1.4.2.min.js" ></script>
<script type="text/javascript"> 
 var styleSheet = document.createStyleSheet();
 var css= "UL{list-style-type:none;display:inline;}LI{padding:0px;}";
$(document).ready(function(){
styleSheet.cssText = css;

});
</script>
</head>
<body>
<DIV>f
<UL>
<LI><a>dfgfdg</a></LI>
<LI><a>fdgdfg</a></LI></UL>?
</DIV>?
</body>
</html>

Answer 1

问题是IE8具体。它似乎适用于ie7和ie9。

为了重现错误，在加载页面后应用样式表很重要。我们在这个例子中使用了jquery.ready（），但是代码也会因click和load事件而崩溃。这个bug非常具体。它需要上面示例中使用的精确css和html。我们尝试以不同的方式添加样式表（例如stylesheet.rules [i] .lisStyleType ='none'并在.css文件中添加样式表）但没有成功。我们绝对需要在发生此问题的地方动态添加样式。

Answer 2

createStyleSheet不是跨浏览器友好的解决方案...请尝试使用此代码：

$(function(){
    var styles = "UL{list-style-type:none;display:inline;}LI{padding:0px;}";
    var newSS=document.createElement('link');
    newSS.rel='stylesheet';
    newSS.href='data:text/css,'+escape(styles);
    document.getElementsByTagName("head")[0].appendChild(newSS);
});

我无法确切地告诉你为什么IE崩溃，但这段代码对我有用，它不应该触发任何意外错误。

Answer 3

我在jsfiddle中尝试了你的代码，它没有IE7的错误..问题是什么？

您使用的是哪个版本的IE？你有一个为你崩溃的演示网址吗？我无法重现您的问题，请参阅我的jsfiddle ...

顺便问一下你为什么使用jquery 1.4.2而不是更新的版本？ 1.4.4或1.5.2，在我选择的jsfiddle中1.4.4

Answer 4

请试试这个。测试了IE6,7,8,9 FF，Opera，Googlechrome，Safari

<script type="text/javascript">
function createRuntimeStyle(){
//create a style tag
var rStyle=document.createElement("style");

//create the content of the style tag
var cssDef=document.createTextNode(".myclass{display:block;font-family:Verdana;font-weight:bold;}");

//assign the type
rStyle.type="text/css";


if(rStyle.styleSheet){  //check for IE
rStyle.styleSheet.cssText=cssDef.nodeValue;
}else{ //check for Other Browsers
rStyle.appendChild(cssDef);
}

//append to document head
document.getElementsByTagName("head")[0].appendChild(rStyle);
}

//call to the function
createRuntimeStyle();
</script>

样式表javascript对象的IE崩溃问题非常奇怪

4 个答案: