Css ie6 ie7 firefox compatibility

For example, this condition:
Margin: 3px 3px 0px 3px;
Display: block;

I think you will know what it means at first glance, but through testing, IE6 and IE7 browsers have different performances. IE6 is very loose. It seems that the distance between the left and right of 3 px is changed to double distance, that is, 6 px. IE7 is basically normal.

Later I learned it online and changed the display: block condition to display: inline. Then, IE6 is normal and there is no longer such a large distance and it is more accurate; however, IE7 is abnormal. It seems that the distance on the right is smaller (almost none), and the distance on the left is normal.

After continuing to learn online, I added some conditions and changed the conditions in css to the following:
* Margin: 3px 8px 0px 3px! Important;/*** suitable for IE7.0 ***/
* Margin: 3px 3px 0px 3px;/***** suitable for IE6.0 ***/
Margin: 3px 8px 0px 3px;/***** applicable to FF *****/
* Display: block! Important;
* Display: inline;
Display: block;

Why? The reason is as follows:
IE7.0 is compatible with any conditions. It can recognize both * and! Important;
IE6.0 can recognize *, but cannot recognize it! Important;
FF (Firefox) can recognize it! Important, but cannot recognize.

In this way, if the other party uses FF, it can only recognize margin: 3px 8px 0px 3px, rather than the above two conditions.

If the other party uses IE6.0, the first condition cannot be met. Only the second condition can be recognized first: * margin: 3px 3px 0px 3px;

If the other party uses IE7.0, the first condition is met first. The priority is * margin: 3px 8px 0px 3px! Important;