Weird ie-2

Article-better Layout
Source code download

Problem description
Two days ago, we met this requirement to dynamically add CSS styles to the page, which are inline styles rather than external CSS files.
As usual, I wrote the followingCode:

 
Function addcss (content) {$ ("<style/> "). ATTR ("type", "text/CSS" ).html (content ). appendto ("head") ;}$ (function () {addcss ("body {background-color: # CCC ;}");});
 

It's easy to handle. When I am happy with this concise syntax, I find that the style in Firefox is gone!
The developer tool of IE8 does not find the style we added through javascript in the head.
The page also reports a javascript error:

Solution
There is no possibility that such a simple code is wrong, and it is good to execute in Firefox. Therefore, I guess that IE should handle the style label differently from Firefox.
Combined with the error message in IE, the method or attribute access is accidentally called.
Instead of calling the style label creation method, you can directly create the style label by concatenating strings, as shown below:

Function addcss (content) {$ ('<style type = "text/CSS">' + content + '</style> '). appendto ("head") ;}$ (function () {addcss ("body {background-color: # CCC ;}");});
 

The problem is solved. Now both IE and Firefox are ready.

In-depth consideration
Although the problem can be solved quickly, I will explain why this problem occurs.
Soon, I found this article online
The Processing Method of stylelabels is indeed different from that of stylelabels in the original IE, and ietify sets the stylesheet.css text attribute of stylenodes,
Firefox has nothing to do with style labels and common Div labels.
The author also provides a general method in IE and Firefox:

 
VaR SS1 = document. createelement ('style'); var def = 'body {color: red;} '; ss1.setattribute ("type", "text/CSS"); If (ss1.stylesheet) {// ie ss1.stylesheet.css text = def;} else {// The World var TT1 = document. createtextnode (DEF); ss1.appendchild (TT1);} var HH1 = document. getelementsbytagname ('head') [0]; hh1.appendchild (SS1 );
 

The question is, why can we solve the problem simply by: $ ('<style ../>'). appendto ("head?

Similar to table
If you have encountered innerhtml that cannot set table in IE before, this is a similar problem, as shown below:

 
// This code runs correctly in Firefox. in IE, the error function createtable () {var table = document. createelement ("table"); table. innerhtml = "<tr> <TD> content </TD> </tr>"; document. body. appendchild (table) ;}$ (function () {createtable ();});
 

This code runs correctly in Firefox, and the following error is also reported in IE:

In IE, innerhtml of table is a read-only attribute, so you cannot create a table by assigning values to innerhtml,
However, we can create an entire table and embed it in a div to create a table under IE, as shown below:

// This code correctly runs function createtable2 () {var DIV = Document in Firefox and IE. createelement ("Div"); Div. innerhtml = "<Table> <tr> <TD> content2 </TD> </tr> </table>"; document. body. appendchild (DIV) ;}$ (function () {createtable2 ();});
 

Summary
The problem has been quite clear here. Our solution is actually equivalent to the following code without jquery:

 
Function addcss2 (content) {var DIV = document. createelement ("Div"); Div. innerhtml = '<style type = "text/CSS">' + content + '</style>'; var head = document. getelementsbytagname ("head") [0]; head. appendchild (DIV); // Delete the DIV label head outside the style. replaceChild (div. getelementsbytagname ("style") [0], Div) ;}$ (function () {addcss2 ("body {background-color: # CCC ;}");});
 

Success? Wait. Why is there an error in IE !!!

After some painful attempts, I finally use the following tips (Just add a space before innerhtml & nbsp;) To solve this problem,

 
Function addcss2 (content) {var DIV = document. createelement ("Div"); Div. innerhtml = '& nbsp; <style type = "text/CSS">' + content + '</style>'; var head = document. getelementsbytagname ("head") [0]; head. appendchild (DIV); // Delete the DIV label head outside the style. replaceChild (div. getelementsbytagname ("style") [0], Div) ;}$ (function () {addcss2 ("body {background-color: # CCC ;}");});
 

As for why, maybe only the developers of IE can answer this question.