Based on the bug of ul li nesting in IE, troubleshooting, Solution Process and experiences

Steps to check bugs

1. bug Locating

In js scripts, you can use console or alert to determine the code interval of a bug Based on the execution sequence of the script, and then locate the specific code segment of the bug within the interval.

2. bug fix

The Transform () method is similar to the innerHTML method of the DOM Element Node. I initially thought it was the IE6 \ 7 rendering error caused by this method. Then I changed it to the innerHTML method, and the result is still incorrect.

At this time, I thought of Memory leakage to see if memory leakage is caused by loop references or other reasons during the loop String concatenation process. Then, when some methods are completed, I assign null values to some variables to prevent memory leakage (although I do not know whether it is valid, but at least I tried it), but the result still does not work.

Is there too much data, causing a crash during rendering? So I reduced the length of the spliced data, which is effective. 1 ~ When three pieces of data are rendered, the method is correct. However, IE6 \ 7 still cannot respond to more than three pieces of data. So I tried to insert another piece of data continuously. If there is no problem with one piece of data inserted at a time, I can insert it several times, but I still have a problem with IE. In fact, at this time, my thinking has deviated.

Later, I asked my colleagues to check the problem and said that I had encountered this problem before. It was caused by the incorrect tag closure in IE6 \ 7. That's the real cause of this bug. Later, I printed the concatenated string and used the formatting tool to format it. I quickly found this problem when splicing the string, so I quickly fixed the bug. My online formatting tool: http://tool.chinaz.com/Tools/JsFormat.aspx

3. Test

During the test, we wrote a string of html code and did not close some labels. Let's see the comparison between IE and chrome.

The Code is as follows. In the second li tag, we do not close one of the <span> tags in the ul tag.

Copy codeThe Code is as follows: <ul>
<Li>
<Ul>
<Li> inner li </li>
<Li> inner li </li>
<Li> inner li </li>
</Ul>
</Li>
<Li>
<Ul>
<Li> inner li </li>
<Li> inner li </li>
<Li> inner li
<Span> not closed <span> error happend </span> </li>
</Ul>
</Li>
<Li>
<Ul>
<Li> inner li </li>
<Li> inner li </li>
<Li> inner li </li>
</Ul>
</Li>
</Ul>

IE and chrome are displayed normally, as shown in.

Next, let's take a look at debugging through development tools.

In IE7 ~ 9. The dom structure is disordered. The error message is sent in the unclosed <span> tag, the content of the original third <li> node is directly inserted under the <span> node.

Let's take a look at the situation below chrome: The third li is normally rendered to the dom tree. In the span tag where an error occurs, a closed span tag is automatically added.

4. Summary

Different browsers do different in rendering html, especially IE and other browsers. Chrome and FF have good fault tolerance. Even if html tags on the page are not properly closed, it intelligently identifies them and makes them look flawless in the browser, the final DOM structure is no problem, but the bad side is that you don't know that your code is wrong and you think everything is normal. IE8 \ 9 can also be processed in this way. It seems that there is no problem with the page content. However, with development tools, you can see that the incorrect html code does not have a normal DOM structure. However, IE6 \ 7 won't give you this opportunity, or it will crash.

Chrome allows us to make mistakes, While IE is more strict with us. Although IE makes us a headache, it puts higher requirements on our code! I suddenly felt that it would be nice to have IE...

If one day you find that the dom structure in IE cannot be rendered, remember to remind yourself whether tags in the Code are not closed.