Shulou(Shulou.com)06/01 Report--

This article focuses on "what are the skills to solve browser compatibility". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the techniques for solving browser compatibility?"

1. Under chrome, text characters smaller than 12px will be displayed by default 12px, and chrome will support fonts smaller than 12px.

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

However, the above method chrome27 can not be used in the future. But we can solve this problem with css3.

Box {font-size:12px;-webkit-transform:scale 0.75;}

Second, the default external and internal patches of tags in different browsers are different. Write a few tags at random, without style control, their margin and padding are quite different.

Solution:

* {margin:0;padding:0;}

Note: this is the most common and easy-to-solve browser compatibility problem. Almost all css files start with wildcards to set the internal and external patch of each tag to 0.

Third, set a smaller height label (generally less than 10px). In ie6,ie7, the height exceeds the height set by yourself.

Symptoms of the problem: the height of this tag in ie6, 7 and roaming is out of control, exceeding the height set by yourself.

Encounter frequency: 60%

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

Note: this situation usually occurs in the label where we set the small fillet background. The reason for this problem is that browsers before ie8 gave the label a minimum default line height. Even if your label is empty, the height of the label will still reach the default row height.

4. Pictures have spacing by default

Symptom of the problem: when several img tags are put together, some browsers have default spacing, and the wildcards mentioned in question 1 don't work.

Chance of encounter: 20%

Solution: use the float property to layout the img

Note: because img tags are inline attribute tags, img tags will be lined up on one line as long as the container width is not exceeded, but there will be a gap between img tags in some browsers. Getting rid of this gap is the right way to use float.

Fifth, the setting of the minimum height of the label is incompatible with min-height.

Symptom of the problem: because min-height itself is an incompatible css property, setting min-height is not well compatible with various browsers

Chance of encounter: 5%

Solution: if we want to set the minimum height 200px of a label, we need to set it as follows:

{minmuri heightlevue 200pxpositional heightbloom autogenous importantposition heighttransfixion 200pxswitchoverflowflowfromvisible;}

Note: we have this requirement in many cases when the front end of the Bramp S system is turned on. When the content is less than a value, such as 300px. The height of the container is 300px; when the content height is greater than this value, the container height is pushed up instead of a scroll bar. At this point, we will face this compatibility problem.

VI. Const problem

Note: under Firefox, you can use the const keyword or var keyword to define constants.

Under IE, only the var keyword can be used to define constants.

Solution: uniformly use the var keyword to define constants.

Seven. _ window.location.href problem

Note: 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.

8. Indentation of ul and ol list

When indenting lists such as ul, ol, and so on, the style should be written as follows:

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

It has been verified that in IE, setting margin:0px can remove the top and bottom indentation of the list, blanks, and list numbers or dots, setting padding has no effect on the style; in Firefox, setting margin:0px can only remove the upper and lower blanks, setting padding:0px can only remove left and right indentation, you must also set list-style:none to remove list numbers or dots. In other words, only setting margin:0px in IE can 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.

IX. IE and width and height

IE doesn't recognize the definition of min-, but in fact it treats normal width and height as if there were min. This is a big problem. If you only use width and height, these two values will not change in normal browsers. If you only use min-width and min-height, the width and height will not be set under IE at all.

For example, to set the background picture, 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;}

The minimum width of the page

As in the previous question, IE does not recognize min. To achieve the minimum width, you can use the following methods:

Container {min-width:600px;width:_expression ("600px": "auto");}

The first min-width is normal; but the width on line 2 uses Javascript, which is recognized only by IE, which also makes your HTML document less formal. It actually achieves the minimum width through the judgment of Javascript.

At this point, I believe you have a better understanding of "what are the techniques for solving browser compatibility". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.