Tips to solve browser compatibility

When we are developing front-end web pages and writing the CSS style of the page, we often need to consider the compatibility issues of different browsers, so that the front-end pages we design and develop can be displayed normally on different browsers. . In this chapter, we will bring you some tips to solve browser compatibility, which have certain reference value. Friends in need can refer to them. I hope it will be helpful to you.

1. Under chrome, text fonts smaller than 12px will be displayed as 12px by default, allowing chrome to support fonts smaller than 12px.

box{ font-size: 8px; -webkit-text-size-adjust: none;}

However, the above method will be used in chrome27 in the future unusable. But we can use css3 to solve this problem

box{ font-size: 12px; -webkit-transform: scale(0.75);}

2. The default outer patches and inner patches of tags in different browsers are different. Just write a few tags without adding style control. There is a big difference between margin and padding. Frequency of encounter: 100%

Solution:

* {margin:0;padding:0;}

Note: This is the most common and easiest to solve browser compatibility problem , almost all css files will use wildcards at the beginning to set the internal and external patches of each label to 0.

3. Set a smaller height label (generally less than 10px). In ie6, ie7, and roaming, the height exceeds the height you set.

Problem symptoms: ie6, 7 and The height of this label in Aoyouli is uncontrolled and exceeds the height set by yourself

Encounter frequency: 60%

Solution: Set overflow:hidden for labels that exceed the height; or Set line-height to be less than the height you set.

Note: This situation usually occurs in labels where we set a small rounded corner background. The reason for this problem is that browsers before IE8 will give the label a minimum default line height. Even if your label is empty, the height of the label will still reach the default line height.

4. Pictures have spacing by default

Symptoms of the problem: When several img tags are put together, some browsers have default spacing, plus the problem one The wildcards mentioned in also don't work.

Encounter probability: 20%

Solution: Use the float attribute to layout the img

Note: Because the img tag is an inline attribute tag, so As long as it does not exceed the width of the container, the img tags will be arranged in a row, but some browsers will have a gap between the img tags. Removing this spacing and using float is the right way

5. The minimum height setting of the label, min-height, is incompatible

Symptoms of the problem: Because min-height itself is an incompatible Compatible css attributes, so setting min-height is not well compatible with various browsers

Chance of encounter: 5%

Solution: If we want to set the minimum height of a label 200px, the required settings are:

{min-height:200px; height:auto !important; height:200px; overflow:visible;}

Note: When opening the front end of the B/S system, there are many situations where we have this requirement. When the content is smaller than a value (such as 300px). The height of the container is 300px; when the content height is greater than this value, the height of the container is raised instead of scroll bars appearing. At this time we will face this compatibility issue.

6. Const problem

Explanation: Under Firefox, you can use the const keyword or the var keyword to define constants;

IE Under this situation, you can only use the var keyword to define constants.

Solution: Use the var keyword uniformly to define constants.

7. window.location .href problem

Explanation: Under IE or Firefox2.0.x, you can use window.location or window.location.href;

Under Firefox1.5.x , you can only use window.location.

Solution: Use window.location instead of window.location.href.

Eight, ul and ol lists Indentation problem

When eliminating the indentation of ul, ol and other lists, the style should be written as:

list-style:none;margin:0px;padding:0px;

It has been verified that in IE, setting margin: 0px can remove it Setting padding has no effect on the style of the list's top, bottom, left, and right indents, blanks, and list numbers or dots; in Firefox, setting margin:0px can only remove the top and bottom whitespace, and setting padding:0px can only remove the left and right indents. List-style:none must be set to remove list numbers or dots. In other words, in IE, only margin:0px can be set to achieve the final effect, while in Firefox, margin:0px, padding:0px and list-style:none must be set at the same time to achieve the final effect.

9. Problems with IE and width and height

IE does not recognize the definition of min-, but in fact it treats normal width and height as Use it if there is a min situation. This is a big problem. If you only use width and height, these two values ​​​​will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE.

For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:

box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}

10. Minimum width of the page

As in the previous problem, IE does not recognize min. To achieve the minimum width, The following methods are available:

container{ min-width: 600px;width:expression(document.body.clientWidth＜600? "600px": "auto" );}

The first min-width is normal; but the width in the second line uses Javascript, which is only recognized by IE, which will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

The above is the detailed content of Tips to solve browser compatibility. For more information, please follow other related articles on the PHP Chinese website!