2

我从数据库中提取了一些 html 和 css，它恰好包含一些包装在样式标签中的 css。然后我将一些 innerhtml 设置为字符串变量并显示它。

html 已正确呈现，但 ie 不会显示带有 css 的内容 - 当然 firefox 会。下面是代码的缩写示例

var outputString = '<style type="text/css">.fontRed{color:red;}</style><span class="fontRed">red</span>'

然后我将它设置为innerHTML

document.getElementById('bilbo').innerHTML = outputString;

这在 FF 中正确显示（红色），但在 IE 中没有。是否有我需要为 IE 转义的角色？其余的 html 可以正常工作，甚至内联样式在 IE 中也可以正常工作。

任何帮助都将受到欢迎。

谢谢

4

3 回答 3

1

试试这个方法..在 IE7 及更高版本中测试

// Create the Style Element
var styleElem = document.createElement('style');
styleElem.type = 'text/css' ;

var css = '.fontRed{color:red;}' ;

if(styleElem.styleSheet){
    styleElem.styleSheet.cssText = css;
}
else{
    styleElem.appendChild(document.createTextNode(css));
}

// Append the Style element to the Head
var head = document.getElementsByTagName('head')[0] ;
head.appendChild(styleElem);

// Append the span to the Div 
var container = document.getElementById('bilbo');
container.innerHTML = '<span class="fontRed">red</span>' ;​

检查小提琴

于 2012-11-06T21:59:16.263 回答
1

首先将 附加<style type="text/css">.fontRed{color:red;}</style>到 head 标签。

于 2012-11-06T22:11:57.720 回答
0

只需放在<body>输出字符串的开头即可。IE

document.getElementById('bilbo').innerHTML = '<body>' + outputString;

有关工作演示，请参阅http://jsfiddle.net/ScEZ4/1/ 。

经过测试和工作的 IE6、IE7、IE8、IE9、FF16、Chrome22、Opera12

于 2012-11-06T22:51:30.653 回答