Очень странная проблема сбоя IE с объектом javascript таблицы стилей

#javascript #jquery #html #internet-explorer

#javascript #jquery #HTML #internet-explorer

Вопрос:

Здравствуйте, я использую объект таблицы стилей javascript со специальным стилем и размещаю его в dom ready. Когда я делаю именно свой код, IE вылетает.

Проблема в UL с точно таким стилем, установленным после загрузки страницы. Если я помещу styleSheet.cssText = css; перед загрузкой страницы, все будет правильно. Если я удалю символ f в <DIV>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>

Ответ №1:

Проблема специфична для IE8. Кажется, это работает на ie7 и ie9.

Чтобы воспроизвести ошибку, важно применить таблицу стилей после загрузки страницы. Мы использовали jquery.ready() для этого примера, но код также вылетает из-за событий click и load. Эта ошибка очень специфична. Для этого требуются точные css и html, используемые в примере выше. Мы пытались добавить таблицу стилей различными способами (например, stylesheet.rules[i].lisStyleType=’none’ и добавить таблицу стилей в файл .css), но безуспешно. Нам абсолютно необходимо динамически добавлять стиль, в котором возникает эта проблема.

Ответ №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, но этот код работает для меня, и он не должен вызывать никаких неожиданных ошибок.

Ответ №3:

Я попробовал ваш код в jsfiddle, и в IE7 ошибок нет.. в чем проблема?

Какую версию IE вы используете? У вас есть URL ДЕМО-версии, которая у вас вылетает? Я не могу воспроизвести вашу проблему, пожалуйста, смотрите мой jsfiddle …

Кстати, почему вы используете jquery 1.4.2, а не более позднюю версию? 1.4.4 или 1.5.2, в jsfiddle я выбрал 1.4.4

Ответ №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>