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

This article introduces the reasons and solutions for the incompatibility of browsers such as IE and Firefox. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Do you know the reasons and solutions for the incompatibility of browsers such as IE and Firefox? let me share with you here.

Causes of browser incompatibility and its solution

The causes and solutions of browser incompatibility are summarized as follows:

1. The text size is not compatible. The Song text of the same font-size:14px takes up different space in different browsers. Under IE, it actually occupies a high 16px, while under the blank 3px 1px, it actually occupies a high 17px, while under the white space, it is even more different under 3pxopera. Solution: set line-height for the text. Make sure that all text has a default line-height value. This is important because we cannot tolerate differences in 1px at a high level.

The height limit of the container under 2.Firefox, that is, after the container defines height, the shape of the container border is determined and will not be enlarged by the content, while under IE, it will be enlarged by the content, and the height limit is invalid. So don't easily define height for containers.

3. The problem of content breaking the container is also discussed, horizontally. If the width of the float container is not defined, the content under ff will expand the container width as much as possible, and the content wrapping will be preferred under IE. Therefore, floating containers whose content may break need to define width.

Small experiment: if you are interested, you can take a look at this experiment. Test the following code in different browsers.

Div > div >

The above code is different in different browsers. The experiment originated from the use of small heightvalue div, which should be used in conjunction with overflow:hidden. The experiment is just fun. I want to show that the browser interprets the boundaries of the container very differently, and the effects of the contents of the container are different.

4. The removal of floats can not be done without clearing floats under Firefox.

Correct a misunderstanding that it is wrong to say that ff is rotten when it comes to incompatibility. In fact, it is more often the strange performance of IE that makes us at a loss as to what to do.

5. The most hated double-marginbug.IE6 defines margin-left or margin-right for floating containers. The actual effect is twice as good as the value. Solution to define a display:inline for a floating container.

6.mirrormarginbug . When there is a float element in the outer element, if the outer element defines margin-top:14px, it will automatically generate margin-bottom:14px.padding. It will also have similar problems. It is a specialty under IE6. The situation of this kind of bug is more complex, far more than this one occurrence condition, and has not been systematically sorted out. Solution: set the border or float for the outer element.

Extension: the interpretation of container margin-bottom,padding-bottom under ff and IE is sometimes inconsistent and seems to be related to it.

7. The phenomenon of swallowing. Or IE6, up and down two div, the top div sets the background, only to find that the div that does not set the background below also has a background, this is the swallowing phenomenon. Corresponding to the background gobbling phenomenon above, there is also the phenomenon of missing the bottom frame of the scroll. Solution: use zoom:1. This zoom seems to be specially created to solve IE6bug.

8. Comments can also generate bug. An extra pig, which is a metaphor used by predecessors to sum up the use of bug. Under the bug of IE6, you will see the pig word appear twice on the page, and the amount of repeated content varies according to the number of comments. Solution: use the "picRotatestart" method to write comments.

9.

Riga float

. This is a typical, thorny compatibility problem, hope to cause everyone to face up to, give li different attributes will have different interpretation effect, the explanation under ff is slightly understandable, the explanation under IE6 will make you confused, because of the complexity of the problem, there will be another article devoted to this issue. There are relevant results in the article "experience in the use of ul", but the problem-solving process is not given.

10. The strange behavior of a ul that uses "float:left;display:inline". It can be seen that this sentence css is aimed at doublemarginbug under IE6 and added display:inline, which is also an important part of my css system, which is described in the article "experience in using ul". And the use of this sentence css on ul will make you miserable. So far, we can't say more here.

Leave blank under 11.img. Let's see what's wrong with this code:

Div >

Open the border of div and you find that the bottom of the picture is not close to the bottom of the container, but is caused by the white space character behind the img. To eliminate it, you must write like this.

Div >

The last two tags should be next to. IE7 under the bug still exists. Solution: set display:block for img.

twelve。 Losing line-height.

Text, unfortunately, the line-height effect of single-line text disappears under IE6. The reason is that

This inline-block element is written with the inline element. Solution: float both img and text.

Extension: we all know that img align has text-top,middle,absmiddle and so on. You can try to adjust img and text to make them consistent under IE and ff. You will find that no matter how you adjust them, you will not be satisfied. Simply float both the img and the text and adjust them with margin.

13. Hover status of the link. A: hoverimg {width:300px} the width of the image contained in the link changes when we want the mouse to hover, but it is not valid under IE6, but it is valid under IE7 and ff.

14. Non-linked hover status. Div: hover {} style IE6 is not recognized and only works under IE7 and ff.

15.block a link, its inner absolute layer, absolute layer placed under img,IE, mouse click img will not have a link effect, ff, op normal.

If you have mastered the secret of many of the above problems, 90% of the incompatibility issues do not need another csshack.

16. Float that cannot be completely purged. If you let the li under ul have the float attribute, how do you clear the floating li?

Or

Class= "c" >

Or

Class= "c" >

Or

Class= "c" >

Or the above combination? I can't give an answer to this question.

Here is an example related to this.

.c {clear:both;overflow:hidden;+overflow:visible} .bd {border:1pxsolidred} ul.ex {list-style:none;} ul.exli {float:left;border:1pxsolidgreen;} style > sfsdfsfdfli > sfsdfsfdfli > ul > div > sfsdfsfdfdiv >

Please test under IE and just change margin-top:19px to margin-top:20px. What did you find? Elements: doctype must have, IE6, IE7 margin-top:19px is still good, margin-top:20px has a problem, can not explain … You can also test the clear layer in a different location.

Solution: give the ul attribute zoom:1 (it is useless to add zoom:1 to li)

Extension: the clear layer should be used separately. Maybe you put the clear attribute directly into the following content layer in order to save code, so there is a problem, not only the loss of margin effect under ff and op, but also the invalidation of some margin values under IE

Dddiv > ffdiv >

Overflow:hidden under 17.IE is invalid for absolute layer position:absolute or relative layer position:relative under it. Solution: add position:relative or position:absolute to overflow:hidden. In addition, IE6 supports the features of overflow-x or overflow-y, but not IE7 or ff.

If a serious bug,float element under 18.IE6 does not define a width, and if an internal div defines height or zoom:1, the div will take up a whole line, even if you give the width. float element should be given a width if it is used as a layout or complex container.

For the bug under 19.IE6, the div for absolute positioning contains the div for relative positioning. If the specific value of div height for relative positioning of the inner layer is given, the width of the relative layer of the inner layer will be 100%, and the absolute layer of the outer layer will be enlarged. The solution gives the inner relative layer float attribute.

Under the bug under 20.IE6, in some cases, the text in the float layer under the position: relative layer cannot be selected. This bug forced me to build a common style library.

21. Finally came a Firefox defect width:100% this thing is very convenient to use in IE, will search the width value up layer by layer, ignoring the influence of the floating layer, search under the ff to the floating layer end, so, can only add width:100% to all the floating layers in the middle, tired. Opera this point learned to follow IE.

22.Paddingvs.Margin

Margin is the least compatible attribute for browsers. So use the Padding attribute whenever possible, as long as conditions permit.

So much for the reasons and solutions for the incompatibility of browsers such as IE and Firefox. I hope the above content can be of some help and learn more knowledge. If you think the article is good, you can share it for more people to see.

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.