CSS compatibility with multiple browsers

I am specialized in the UI. I have been writing CSS for several years. I have just published a blog about CSS.Article. If you have any questions, please visitQ & A ForumI will try my best to answer questions.

What is browser hack: When we use different browsers (Firefox IE7 IE6) to access the same website or page, some incompatibility problems may occur, and some may be displayed as normal, some of them are not normal, and we will be very annoyed when writing CSS. After fixing this browser problem, another browser has a new problem. However, hack is a method that allows you to write independently in a CSS file to support styles in different browsers. This is harmonious. Haha!

The compatibility of Internet Explorer 7 recently released by Microsoft does impose a heavy burden on some page makers. Although IE7 has been standardized, there are still many differences with ff, therefore, I need to use the hack of IE7. Many of my friends have asked me what the hack is. No hack for IE7 is found yet. In addition to the previous article, the hack method in "CSS style for Firefox IE6 IE7" is also very useful.

People with a logic idea will know that they can use IE and FF hack in combination. Here we will introduce three hack, for example: (suitable for beginners, haha, let's pass by here .)

ProgramCode

The first hack, ie FF all browsers are public (not actually hack)
Height: 100px;
Dedicated for the second hack IE6
_ Height: 100px;
The third hack IE6 IE7 public
* Height: 100px;

After introducing the three hack, let's take a look at how to define a dedicated hack for IE6 IE7 ff for each attribute in a style. Let's look at the following code. The sequence cannot be wrong:

Program code

Height: 100px;
* Height: 120px;
_ Height: 150px;

Next, I will briefly explain how browsers understand these three attributes:

In ff, 2nd and 3 attributes are not recognized, so they read the height: 100px;

In IE7, the third attribute IE7 is unknown, so it reads 1st and 2 attributes, and because the second attribute overwrites the first attribute, therefore, IE7 eventually reads the 2nd attributes * Height: 120px;

In IE6, all three attributes are recognized by IE6, so all three attributes can be read, and because the third attribute overwrites the first two attributes, therefore, IE6 eventually reads the third attribute.