Based on IE under the UL Li each other nesting bugs, troubleshooting, resolution process and experience introduction _javascript skills

To check for bugs

1. Bug Positioning

In the JS script, you can use console or alert to determine the code interval for the bug in the order in which the script is executed, and then further in the interval to find the specific code snippet in which the bug occurred.

2. Bug fix

By excluding, which is causing the bug when inserting the content of the node, I am using the Kissy dom.html () method, which functions like the DOM element node innerHTML method, which I thought was the result of the Ie6\7 rendering error. Then I changed the innerHTML method, the result is still wrong.

This time I thought of the memory leak, see if there's a circular reference or some other reason for the memory leak in the looping string, and then, at the end of some methods, I'm going to assign some variables null to prevent memory leaks (though I don't know if it works, but at least I've tried) The result is still not good.

is not too much data, resulting in a sudden rendering of the collapse? So I reduced the length of the stitching data, which worked. 1~3 a piece of data, you can render, it means that the method is not wrong, but more than 3 of the data, Ie6\7 still can not respond. So I try a piece of data to continue to insert, because one insert 1 data is no problem, I can not be inserted more than a few times, but IE still have problems. In fact, at this time my ideas have deviated.

Later find colleagues to see, said before also encountered this problem, is ie6\7, the label is not properly closed cause. Yes, that's the real reason for the bug. Later, I printed the concatenation string and then formatted it using the formatting tool, and quickly found the problem when I spliced the string, so I quickly fix the bug. The online formatting tool I used:http://tool.chinaz.com/Tools/JsFormat.aspx

3. Test

At the time of the test, we wrote a string of HTML code and did not close the tabs to see IE and chrome comparisons.

The code is as follows, in the second Li tag, we have one of the UL tags in the <span> tag, do not close treatment

Copy Code code 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 above.

Next through the development tool debugging to see.

Under Ie7~9, the DOM structure is deranged, sending the wrong place in the closed <span> tag, and the original third <li> node is plugged directly under the <span> node.

Let's take a look at what's going on in Chrome: The third Li is normally rendered into the DOM tree, and a span closure tag is automatically made up in the wrong span label.

4. Summary

Browsers behave differently when rendering HTML, especially IE browsers with other browsers. Chrome and FF are good for fault tolerance, even if there is an HTML tag in the page that is not closed properly, it will be smart to recognize it and make it look good in the browser, and the final DOM structure is fine, but the downside is that you don't know your code is wrong and think everything is fine. And ie8\9 can now do this, it looks like the page content is not a problem, but, through the development tools, you can see that the wrong HTML code does not have a normal DOM structure. But Ie6\7 will not give you such a chance, or it will collapse directly.

Chrome can allow us to make mistakes, and IE is more stringent to us, although IE let us very headache, but the code put forward higher requirements! Suddenly feel, have ie also good ...

If one day, you find IE under the DOM structure can not be rendered out of the time, remember to remind yourself whether the code in the tag is not closed.