Compatibility with browsers

First of all, there are many introductions to the CSS hack method on the Internet, a wide variety of methods, and beginners are often confused. Some of these CSS hack methods are applicable to a very special case, while others are applicable to some common methods.

We can pay more attention to the latter in our daily work. The former does not need to pay too much attention, but simply searches the Internet to find a solution.

Here is a general hack method. For example, for a certain attribute in CSS, we want to set different values for different browsers. For example, for a div, we want the width to be 50 pixels in Firefox and 60 pixels in IE. How can this problem be achieved? See the following code:

1234	# Demo div {width: 50px;/* FireFox valid */+ width: 60px;/* IE valid */}

In the code above, the width: 50px of row 2nd is a normal style. In the next row, add a plus sign before the width attribute. This style is considered invalid in Firefox, however, this plus sign in IE will be ignored, so it is still understood as the width attribute, so as to overwrite the previous setting, so that Firefox and IE can be distinguished.

What if I want to further distinguish IE 6 from IE 7? See the following code:

12345

# Demo div {width: 50px;/* FireFox valid */+ width: 60px;/* IE 7 valid */_ width: 70px;/* IE 6 Valid */}

The above code can differentiate the three browsers. In IE7, a plus sign is added before the property. This plus sign is ignored. If an underline is added before the property, the entire style is ignored, thus, the distinction between the three mainstream browsers is achieved.

At this point, we will naturally think, under what circumstances will this method be used to differentiate browsers? There are usually two types of pages we want to create. One is to completely start from scratch, and the other is to modify or repair an existing webpage.

In the first case, we are very clear about every detail of the web page, so we do not often encounter compatibility issues with Firefox and IE. Even if we encounter it, we can find other solutions. In the second case, it is much more complicated, because a webpage may be very complicated and the cascade relationship is also complicated, it is difficult to figure out the number of layer settings on a certain attribute that will affect it. Therefore, it is often possible to fix it in the form of "plaster.

For example, the final effect of the following page appears in firefox after the rounded corners are neatly arranged in IE when a rounded corner frame is created, however, if it is adjusted according to Firefox, there will be misplacement in IE.

 

The page content is nested layer by layer. It is difficult to find the root cause of the problem without knowing the details. Therefore, it is very convenient to use the patching method here (although not the most elegant and perfect method). For example, you can use the above method to control the attributes of the rounded corner image.

In general, you can use the plus sign or underline Method for any attribute to set different browsers. Of course, it should be pointed out that any hack method should be used with caution. It is better to design it according to standard and elegant CSS. Such code is much better in readability and maintainability, it is also our goal.