How major websites solve the compatibility issues of various versions of IE (the title is a bit big)_html/css_WEB-ITnose

From IE6 to IE10, the interpretation of CSS has changed greatly. However, all major websites have achieved full compatibility (non-IE browsers themselves have no problem.), I would like to ask, what is a more general solution? Is there a unified plan or tutorial for this aspect?
Thank you all heroes.

Reply to the discussion (solution)

The CSS document explains which browsers do not support this style

Put the style for ie6 here

The CSS document explains which browsers do not support this style

Put the style for ie6 here
I know the situation mentioned above, this is for small pages. For large websites, this method can only be used partially, otherwise Taobao will just go from ie6 to ie9, then to ff, and then to gc, and it will be over!
Of course, this method is also needed, so where can I find the complete information?
Thank you.

The prerequisite for compatibility is that your CSS code must be very standardized. Like the code I wrote before, it would be different without a browser. It is very troublesome to judge and so on, but now most of them are No problem. If you write the code in a standardized way, there won’t be much of a problem. You can use _width locally, or if like this.

Anyway, I think I still need to look for compatible writing methods in CSS. , should be able to solve many problems!

Wow, the big brother on the second floor is still awake at 2:30 in the morning~~~~~
Well, I think browser compatibility is nothing more than margin, padding, and png pictures~~~
If your website is large, then write one screen of code and debug each browser~ Otherwise, it will be too troublesome to wait until you have finished writing and then check and make changes.
Write one screen and check one screen. I usually do this, and there won’t be many problems~~
If there is a problem with which browser is compatible, just write a separate style for that browser~~~
Hehe
o(∩_∩)o~

The prerequisite for compatibility is that your CSS code must be very standardized. Like the code I wrote before, it would be different without a browser. , and then judge etc., it is very troublesome, but now most of them have no problem. If the code is written in a standardized way, there will not be much problem. You can use _width, ah, or if like this in some parts and it will be OK

The 4th floor is right, I guess that’s the case. So, are there any standardized tutorials for this kind of standard? For example: under what circumstances should padding not be used together with margin.
Actually, to put it bluntly, CSS has so many functions and countless uses, but to be fully compatible, some functions must be cut off. So who has compiled a tutorial on this part of the cut off? Or content. Thank you

First, reset the page style. For example: *{margin:0;pading:0} ...

Then, write the style according to a relatively standard browser (ff, chrome)

Finally, Zhong did some processing for other browsers (ie, safari, opera)

The main reason for the problem is nothing more than:
The box model parsing is different (such as width: 100%; then added padding)

Combination of padding (mainly margin-top, margin-bottom)

Floating (anyway, there is no special requirement, I always use overflow:hidden; But novices often get confused by some BUGs because of this. Honestly .clear; clear:after; *html .clear is better)

Inhumane BUGs in various browsers (this later Rely on experience, rely on baidu and google in the early stage)

First, reset the page style. For example: *{margin:0;pading:0} ...

Then , write styles according to relatively standard browsers (ff, chrome)

Finally, Zhong does some processing for other browsers (ie, safari, opera)

The main reason for the problem is not Except:
Box model parsing is different (for example, width: 100%; and then padding is given)

Combination of padding (mainly margin-top, margin-bottom)

Float ……

Have you organized the first, second and last things? Thank you. The purpose of this post is to organize the content that can be actually used. I know the ellipsis, it means there are N more. What I want is the N more, not the ellipses. Thank you. Can anyone have a well-organized copy, even if it is not the most complete, it will be fine.

Thank you to the 8th floor!

Actually, to put it bluntly, CSS has so many functions and countless uses, but to be fully compatible, some functions must be cut off. So who has compiled a tutorial on this part of the cut off? Or content. Thank you
The poster is too lazy. Being lazy can only temporarily save effort, but once there is a problem, you will still be dumbfounded.
So it is useless for others to sort out N pages for you. The most useful thing is that you have to learn one by one. Practice until you realize it.
You said you want to "cut off some functions", which is exactly the opposite (another idea of ​​laziness, laziness is your core problem).
In order to be compatible, you have to do as much as possible For a single function, sometimes you have to write several times the content in CSS.
As for whether there are any agreed-upon rules and code snippets, that is impossible. They say that JS is flexible, but CSS is more flexible than JS. It’s a hundred times more flexible and can completely change according to your page design. Unless you want to use the same interface as others, then there is a shortcut, just use their CSS and HTML structure and only change the text content.

12 Lou is right, I do have the idea of ​​being lazy, but I also have the idea of ​​not being lazy, that is: organizing the content does not mean organizing the CSS. Rather, it is a compiled summary of fully compatible CSS usage.
For example: the existing ones are just a certain attribute, explained in different browsers, and then give examples of almost all attributes. The advantage of this is that it is a reference book, like a dictionary. You can't learn real English just by holding an English dictionary.
What I want is a tutorial on how to write fully compatible CSS. This thing is indeed feasible by summarizing it bit by bit, but I believe that students who want to learn full compatibility will want to have such a tutorial. This tutorial summarizes all the incompatible content and then teaches us how to build it. A fully compatible website.
I believe that many people actually make some incompatible mistakes when they first build a website. Because there is no guidance or tutorials in this regard, after the final website is built, it will be difficult to correct the incompatible areas one by one. It is knowing it but not knowing why it is (ie: adding an attribute, subtracting an attribute, etc., it happens to be compatible).
Therefore, if there is such a tutorial, I believe it will be beneficial to everyone. Even if I need to buy this book, I will not hesitate to buy it.

Supplement:
Example: Sometimes it is necessary to leave part of the space blank. Visually, the effect of padding and margin is the same, but a certain attribute of its parent element or child element or adjacent element (For example, display: fixed) may cause browser compatibility issues. So, how to make an overall plan, and what is the theoretical basis for the overall plan?
You can take a look at the CSS of major websites that are fully compatible. That was summarized by someone. At the same time, along with this summary, in order for these CSS to play their role, certain CSS functions must be discarded ( There must be some CSS functions that will not be fully compatible as long as they are used). What I want is this summary process, or a tutorial. Can anyone help me? If you download that CSS, it will be useless because you don’t know how to plan your website with this CSS.

I feel deeply. Yes, what 4L said is true. When I first started writing pages, the compatibility was very poor. Later, I did more, and I guess the quality has improved. Generally, this does not happen. Problem, if there is a problem with IE6, it must be that there are no specifications written on the page. I think although IE6 is very annoying, its error detection ability is really strong. It won’t work if it makes even a few mistakes, so specifications are very important

I think it is impossible to rely on a tutorial to achieve full compatibility. Different screen structures and label nesting will affect each other, and specific problems must be determined based on attributes.

Plans often cannot keep up with changes. Be realistic and take one step at a time.