Big Summary of browser compatibility issues _ javascript skills

This article introduces the general knowledge about 42 browser compatibility issues. This article is very detailed. If you are interested, learn it together. JavaScript

1. HTML object Acquisition Problems

FireFox: document. getElementById ("idName ");

Ie: document. idname or document. getElementById ("idName ").

Solution: Use document. getElementById ("idName") in a unified manner ");

2. const Problems

Note: In Firefox, you can use the const keyword or var keyword to define constants;

In IE, constants can only be defined using the var keyword.

Solution: Use the var keyword to define constants.

3. event. x and event. y

Note: In IE, the event object has the x and y attributes, but does not have the pageX and pageY attributes;

In Firefox, the event object has the pageX and pageY attributes, but does not have the x and y attributes.

Solution: Use mX (mX = event. x? Event. x: event. pageX;) to replace event. x in IE or event. pageX in Firefox.

4. window. location. href

Note: in IE or Firefox2.0.x, you can use window. location or window. location. href;

Only window. location.

Solution: Use window. location to replace window. location. href.

5. frame Problems

The following frame is used as an example:

(1) access the frame object:

IE: Use window. frameId or window. frameName to access this frame object. frameId and frameName can have the same name.

Firefox: only window. frameName can be used to access this frame object.

In addition, both ieand firefoxcan access this frame object by using the upload metadata Doc ument. getElementById ("frameId.

(2) Switch frame content:

In both ieand firefox, you can use Upload upload Doc ument. getElementById ("testFrame"). src = export xxx.html "or window. frameName. location = export xxx.html" to switch the frame content.

If you need to return the parameters in the frame to the parent window (note that it is not opener but parent frame), you can use parent in the frame to access the parent window. Example: parent.doc ument. form1.filename. value = "Aqing ";

6. Modal and non-modal window Problems

Note: in IE, you can use showModalDialog and showModelessDialog to open modal and non-modal windows; in Firefox, no.

Solution: Use window. open (pageURL, name, parameters) to open a new window.

If you want to pass the parameters in the Child window back to the parent window, you can use window. opener in the Child window to access the parent window.

For example, var parWin = window. opener; parWin.doc ument. getElementById ("Aqing"). value = "Aqing ";

7. Differences between firefox and IE parent elements (parentElement)

IE: obj. parentElement

Firefox: obj. parentNode

Solution: because both firefox and IE support DOM, using obj. parentNode is a good choice.

8.doc ument. formName. item ("itemName ")

Problem description: in IE, you can use document. formName. item ("itemName") or document. formName. elements ["elementName"]; In Firefox, only document is allowed. formName. elements ["elementName"].

Solution: Use document. formName. elements ["elementName"].

9. Collection class Object Problems

Problem description: in IE, you can use () or [] to obtain collection class objects. In Firefox, you can only use [] to obtain collection class objects.

Solution: use [] to retrieve collection class objects.

10. Custom Attributes

Problem description: in IE, you can use the method to obtain general attributes to obtain custom attributes, or use getAttribute () to obtain Custom Attributes. In Firefox, you can only use getAttribute () obtain custom attributes.

Solution: Get custom attributes through getAttribute.

11. Question about the input. type attribute

Problem description: The input. type attribute in IE is read-only, but the input. type attribute in Firefox is read/write.

Solution: do not modify the input. type attribute. If you must modify it, You can first hide the original input, and then insert a new input element at the same position.

12. event. srcElement Problems

Problem description: in IE, the even object has the srcElement attribute, but does not have the target attribute. In Firefox, the even object has the target attribute, but does not have the srcElement attribute.

Solution: Use srcObj = event. srcElement? Event. srcElement: event.tar get;

If you consider 8th issues, use myEvent instead of event.

13. body Loading Problems

Problem description: Firefox's body object exists before the body tag is fully read by the browser, While IE's body object must exist after the body tag is fully read by the browser.

[Note] the problem has not been verified. You can modify it after verification.

[Note] It has been verified that IE6, Opera9, and FireFox2 do not have the above problems. A simple JS script can access all objects and elements that have been loaded before the script, this element is not loaded yet.

14. Event delegation Method

Problem description: Use document in IE. body. onload = inject; function inject () has been implemented before this; in Firefox, use document. body. onload = inject ();

Solution: Use document. body. onload = new Function ('inject () '); or document. body. onload = function () {/* here is the code */}

[Note] differences between a Function and a function.

15. Table Operation Problems

Problem description: operations on table labels vary with ie, firefox, and other browsers. in ie, assignment of innerHTML values to table and tr is not allowed. When a tr value is added to js, the appendChild method does not work.

Solution: // append an empty row to the table:

Var row = otable. insertRow (-1); var cell = document. createElement ("td"); cell. innerHTML = ""; cell. className = "XXXX"; row. appendChild (cell); [note] I have never encountered this problem because I seldom use JS to directly operate tables. We recommend that you use the JS framework set to operate tables, such as JQuery.

16. Assignment of object width and height

Problem description: The statement similar to obj. style. height = imgObj. height in FireFox is invalid.

Ø CSS

1. cursor: hand VS cursor: pointer

Firefox does not support hand, But ie supports pointer

Solution: Use pointer

2. innerText works normally in IE, but not in FireFox.

TextContent is required.

Solution:

if(navigator.appName.indexOf(“Explorer”)  >  -1){document.getElementById(‘element').innerText  =  “my  text”;}else{document.getElementById(‘element').textContent  =  “my  text”;}

3. CSS transparency

IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).

FF: opacity: 0.6.

4.width and padding in CSS

In IE7 and FF, width does not include padding, and Ie6 includes padding.
5. The interpretation of FF and IEBOX models is inconsistent, resulting in a 2px difference

Box. style {width: 100; border 1px ;}

Ie is interpreted as box. width = 100

Ff is interpreted as box. width = 100 + 1*2 = 102 // Add the border 2px

Solution: p {margin: 30px! Important; margin: 28px ;}

Note that the order of the two margin cannot be reversed, and IE cannot recognize it! Important, but other browsers can recognize it. So in IE, it is actually explained as follows: p {maring: 30px; margin: 28px}

If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: XXpx! Important;

6. The BOX interpretations of IE5 and IE6 are inconsistent.

In IE5, p {width: 300px; margin: 0 10px 0 10px ;}

The width of p is interpreted as 300px-10px (right fill)-10px (left fill), and the final width of p is 280px, in IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can modify p {width: 300px as follows! Important; width/**/: 340px; margin: 0 10px 0 10px}

7. Questions about ul and ol list indentation

When the indentation of ul and ol lists is eliminated, 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 the top, bottom, left, right, and right indentation of the list, as well as the list number or dot. Setting padding does not affect the style. In Firefox, setting margin: 0px can only remove the upper and lower spaces. After padding: 0px is set, only the left and right indentation can be removed. You must also set list-style: none to remove list numbers or dots. In other words, you can set only margin: 0px in IE to achieve the final effect. In Firefox, you must set both margin: 0px, padding: 0px, and list-style: none can achieve the final effect.

8. horizontal element center

FF: margin: 0 auto;

IE: parent {text-align: center ;}

9. Vertical center of Div

Vertical-align: middle; Increase the line spacing to the same height as the entire DIV: line-height: 200px; then insert the text to center vertically. The disadvantage is that you need to control the content rather than line feed.

10. Question about doubling margin

P set to float will double the margin set in ie. This is a bug in ie6. The solution is to add the display: inline in the p;

For example:

The corresponding css is

# Imfloat {float: left; margin: 5px;/* in IE, 10px */display: inline;/* in IE, 5px */}

11. Questions about IE and width and height

IE does not recognize the min-definition, but in fact it treats normal width and height as min conditions. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only min-width and min-height are used, the width and height under IE are not set at all.

For example, to set a background image, the width is important. To solve this problem, you can:

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

12. Minimum page width

For the preceding problem, IE does not recognize min. To minimize the width, use the following method:

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

The first min-width is normal, but the width of line 2nd uses Javascript, which is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through Javascript judgment.

13. The bug that DIV floating IE text produces 3 pixels

The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px away from the left.

# Box {float: left; width: 800px; }# left {float: left; width: 50% ;}# right {width: 50% ;} * html # left {margin-right:-3px; // This sentence is critical}

14. Questions about Internet Explorer

When the p application is complex, there are some links in each column. When DIV and so on, it is easy to hide and seek.

Some content cannot be displayed. When you select this area, the content is displayed on the page.

Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible.

15. p closure of float; clear floating; adaptive height

① Example:

The NOTfloatC here does not want to continue translation, but wants to move down. (FloatA and floatB attributes have been set to float: left ;)

This code has no problem in IE, and the problem lies in FF. The reason is that NOTfloatC is not a float label and must be closed. In

Add

This p must pay attention to the position, and must be at the same level as the two p with the float attribute. No nested relationship exists between them; otherwise, an exception will occur. And define the clear style as follows:. clear {clear: both ;}

② Do not set the height of p as an external wrapper. In order to make the height adaptive, overflow: hidden should be added to the wrapper; when the box containing float is included, highly adaptive is invalid in IE. In this case, the private attribute of IE's layout should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility.

For example, a wrapper is defined as follows:

. Colwrapper {overflow: hidden; zoom: 1; margin: 5px auto ;}

③ For typographical layout, the most commonly used css description may be float: left. Sometimes we need to make a unified background behind the float p in the n column, for example:

For example, we want to set the background of the page to Blue to make the background color of all three columns blue, but we will find that as the left center right is stretched down, the storage height of the page remains unchanged. The problem is that the page is not a float attribute. Because the page is centered, it cannot be set to float, so we should solve the problem as follows:

Embed a float left and the DIV with a width of 100% is solved.

④ Universal float closure (very important !)

For details about the principle of clear float, see [How To Clear Floats Without Structural Markup]. Add the following code To Global CSS and add class = "clearfix" To the p To be closed.

/* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 

Alternatively, set. hackbox {display: table; // display the object as a table at the block element level}

16. highly unsuitable

When the height of the inner layer object changes, the height of the outer layer cannot be adjusted automatically, especially when the inner layer object uses margin or padding.

Example:

# Box {}# box p {margin-top: 20px; margin-bottom: 20px; text-align: center ;}
Content in object p </p>

Solution: Add two empty P object CSS codes {height: 0px; overflow: hidden;} to the p object or add the border attribute to the DIV.

17. There is a gap in IE6.

There are many tips to solve this BUG. They can be to change the html layout, set img to display: block, or set vertical-align to vertical-align: top/bottom/middle/text-bottom can be solved.

18. Align text and text input boxes

Add vertical-align: middle;

It has been verified that any version of IE is not applicable, but ff, opera, safari, and chrome are all OK!

19. The content in LI exceeds the length and is displayed with a ellipsis.

This technique is applicable to IE, Opera, safari, and chrom browsers, and is not supported by FF.

20. Why cannot I set the color of the scroll bar for IE in web standards?

The solution is to change the body to html.

25. FORM tag

In IE, this label will automatically margin some margins, while in FF, margin is 0. Therefore, if you want to display consistency, it is best to specify margin and padding in css, for the above two problems, I usually use this style ul in css, form {margin: 0; padding: 0 ;}.

26. Attribute selector (this is incompatible and is a bug in hiding css)

P [id] {} p [id] {}

This is hidden for versions earlier than IE6.0 and IE6.0, and works with FF and OPera. there is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in p [id, all p tags have IDs in the same style.

27. why can't the FF text support the height of the container?

Containers with fixed height values in the standard browser won't be opened as in IE6, so I want to fix the height and how can I set it to be supported? The method is to remove the min-height: 200px setting for height. Here, we can define this to take care of IE6 that does not know min-height:

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

The above content is a summary of browser compatibility issues Shared by Alibaba Cloud. I hope you will like it.