JS demo cross-browser inline-block

The implementation principle is basically not introduced in this log. For detailed principles of inline-block across browsers, see:
Original article: cross-browser inline-block
Translation: cross-browser inline-block
OK. You can select both Chinese and English.

Here is a demo of my last real project page. See here: Use a JS program to demonstrate how to implement inline-block across browsers
This page needs to be implemented based on the principle of inline-block across browsers. At the same time, I made such a rough demo to give my colleagues a clearer explanation. If you are interested, you can work with the principles mentioned above.Article, Demo by yourself, I believe this will remember more reliable.

OK. Start with the demo. Follow the steps described in the tutorial to optimizeCodeThe general process is as follows: firefox3-> firefox2-> IE7-> IE6. In actual development and writing of this demo, I omitted this step for Firefox 2 optimization. My idea at the time was that Firefox updates were positive in the industry, and most people's Firefox prompts automatic upgrades (I am ), so there will be no separate Firefox 2 version. More importantly, I did not understand the issue of firefox2 bug handling by the author (it seems that the author does not understand it), So I omitted firefox2. The author's description of this Part in the original article is as follows:

1 Firefox 2 doesn't support inline-block, but it does support a Mozilla specific display property '-moz-inline-stack', which displays just like inline-block. and when we add it before display: inline-block, ff2 ignores that declaration and keeps-moz-inline-stack because it doesn't support inline-block. browsers that support inline-block will use it and ignore previous display property.
2 ......
3 Honestly, I don't know what causes this bug. But there is quick fix. Wrap everything inside < Li > With < Div > .

Firefox 2 does not support inline-block, but it supports the display attribute '-moz-inline-stack' unique to Mozilla, which is similar to inline-block. Before adding it to display: inline-block, ff2 ignores inline-block and retains-moz-inline-stack because it does not know inline-block. Browsers that support inline-block will use inline-block to ignore the previous display attribute.
......
Frankly speaking, I don't know what caused this bug. However, there is a quick correction method. Set<Li>Use all<Div>.

If you have any reason, please tell me, because I am too stupid and I have no firefox2 at hand, I have to stop it, so it is hard to understand t_t.

OK. Continue with the demo.
The first step of "Adjust inline-block" is to complete the CSS configuration of Firefox. If you are demonstrating it in IE, clicking this step will not show any page effect.
In step 2, "Adjust vertical alignment baseline" will change the vertical alignment of Li to the top alignment. This step applies to Firefox and IE series.
Step 3 "Adjust haslayout of IE" and Step 4 "Let IE6 implement Min-height in disguise" won't work in Firefox.
The last step is to reset Li to the state of the most common CSS code, that is, the definition of the element's own appearance, which is also the first intuition that will be defined when we write CSS.

Okay, let's not talk about anything else. I don't need to talk about it anymore.
Note: The model is successfully tested in firefox3, IE6/IE7/IE8, opera9.26, and Safari 4 for win.

Demo: Use a JS program to demonstrate how to implement inline-block across browsers