46 Common browser compatibility issues Big Summary

Large rollup of browser compatibility issues
Øjavascript 3

1. Getting problems with HTML Objects 3

2. Const Issue 3

3. Event.x and EVENT.Y issues 3

4. Window.location.href Question 3

5. Frame Question 3

6. Modal and non-modal window problems 3

7. The difference between Firefox and IE's parent element (parentelement) 3

8. Document.formName.item ("ItemName") Question 3

9. Collection Class object Issues 3

10. Custom Attribute Issues 3

One. Input.type attribute Issue 3

Event.srcelement Question 3

Body Loading Problem 3

14. Event Delegation Method 3

Table Operation Problem 3

16. Object width High Assignment problem 3

Øcss 3

1. Cursor:hand VS Cursor:pointer 3

2. innertext works in IE, but not in Firefox. 3

3. CSS Transparency 3

4. Width and padding in CSS 3

5. FF and IE box model interpretation inconsistent resulting in a difference of 2px 3

6. IE5 and IE6 box explanations are inconsistent 3

7. UL and OL list indent issues 3

8. Element horizontal Centering Problem 3

9. Vertical center of Div Question 3

Question of doubling the margin 3

One. ie with width and height issues 3

12. Minimum width of page 3

Div floating IE text generates 3 pixel bug 3

ie hide and seek problem 3

The div closure of the. float; clear float; Adaptive Height 3

16. Height not suitable for 3

3. There is a void under the IE6 film.

18. Text Input Box 3

After the content in Li is longer than the length, the ellipsis displays 3

20. Why IE cannot set the scrollbar color in Web Standard 3

21. Why can't I define a container of around 1px height 3

22. Link (A-label) border with background 3

23. The hover style does not appear after hyperlink access 3

Form Label 3

25. Attribute selector (this is not considered compatible, is a bug to hide CSS) 3

26. Why the text under FF cannot open the height of the container 3



Øjavascript
1. Getting problems with HTML objects
FireFox:document.getElementById ("Idname");
Ie:document.idname or document.getElementById ("Idname").
Solution: Uniform Use of document.getElementById ("Idname");

2. Const ISSUES
Note: Under Firefox, constants can be defined using the Const keyword or the var keyword;
Under IE, you can only use the var keyword to define constants.
Workaround: Use the var keyword uniformly to define constants.

3. Event.x and Event.y issues
Description: Under IE, the event object has an X, y attribute but no pagex,pagey attribute;
Under Firefox, the event object has the Pagex,pagey property, but there is no X, Y property.
Workaround: Use mx (mx = event.x? Event.x:event.pagex) to replace IE under the Event.x or Firefox under the Event.pagex.

4. WINDOW.LOCATION.HREF Issues
Description: Under IE or firefox2.0.x, you can use window.location or window.location.href;
firefox1.5.x, you can only use window.location.
WORKAROUND: Use window.location instead of window.location.href.

5. Frame Issues
Take the following frame as an example:
<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>
(1) To access the Frame object:
IE: Use Window.frameid or window.framename to access the frame object. Frameid and FrameName can have the same name.
Firefox: Only use Window.framename to access this frame object.
In addition, Window.document.getElementById ("Frameid") can be used in both IE and Firefox to access the frame object.
(2) Switch frame content:
You can use Window.document.getElementById ("Testframe") in both IE and Firefox. src = "xxx.html" or window.frameName.location = "xxx.ht ML "to toggle the contents of the frame.
If you need to pass the arguments in the frame back to the parent window (note that it is not opener, but the parent frame), you can use parent in the frame to access the parent window. For example: parent.document.form1.filename.value= "aqing";

6. Modal and non-modal window problems
Description: Under IE, the modal and non-modal windows can be opened by ShowModalDialog and showModelessDialog; Firefox is not.
WORKAROUND: Open a new window directly using window.open (pageurl,name,parameters).
If you need to pass parameters from a 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.document.getElementById ("aqing"). Value = "aqing";

7. The difference between Firefox and IE's parent element (parentelement)
IE:obj.parentElement
Firefox:obj.parentNode
Workaround: Because both Firefox and IE support DOM, using Obj.parentnode is a good choice.

8. Document.formName.item ("ItemName") issues
Problem description: Under IE, you can use Document.formName.item ("ItemName") or document.formName.elements ["ElementName"];firefox, Use only document.formname.elements["ElementName"].
Workaround: Use document.formname.elements["elementname" uniformly.

9. Collection Class object issues
Problem description: Under IE, you can use () or [] get the Collection class object; Firefox can only use [] to get the collection class object.
WORKAROUND: Use [] uniformly to get the collection class object.

10. Custom Attribute Issues
Problem description: Under IE, you can get custom properties by using the method of getting the general properties, or you can use GetAttribute () to obtain the custom attributes, and under Firefox, you can only use getattribute () to derive the custom attributes.
Workaround: Unify through getattribute () to get the custom attributes.

Input.type Property Issues
Problem Description: The Input.type property under IE is read-only, but the Input.type property in Firefox is read-write.
WORKAROUND: Do not modify the Input.type property. If you have to modify it, you can hide the original input and then insert a new INPUT element in the same location.

Event.srcelement problems
Problem description: Under IE, even object has Srcelement property, but no target property; Under Firefox, even object has the target property, but there is no srcelement attribute.
Workaround: Use Srcobj = event.srcelement? event.srcElement:event.target;
If you consider question 8th, use MyEvent instead of event.

Body Loading problem
Problem Description: The body object of Firefox exists before the body tag is fully read by the browser, while the body object of IE must exist after the body tag is fully read into the browser.
[note] This issue has not been verified and will be modified after verification.
[note] proven, IE6, Opera9, and FireFox2 do not have the above problem, the simple JS script can access all the objects and elements that have been loaded before the script, even if this element has not been loaded complete.

14. Event Delegation Method
Problem description: Under IE, use document.body.onload = inject; where function inject () has been implemented before, in Firefox, using document.body.onload = inject ();
Workaround: Use document.body.onload=new Function uniformly (' inject () '); or document.body.onload = function () {/* Here is the code */}
Note The difference between function and function.

Table Operation Issues
Problem description: IE, Firefox and other browsers for the table label operation is different, in IE does not allow the table and TR innerHTML assignment, using JS to add a TR, using the AppendChild method is not used.
WORKAROUND://Append a blank line to the table:
var row = Otable.insertrow ( -1); var cell = document.createelement ("TD"); cell.innerhtml = ""; cell.classname = "XXXX"; Row.appendchild (cell); [note] Since I rarely use JS direct operation of the table, this problem has not been met. It is recommended to use the JS frameset to manipulate table, such as jquery.

16. Object width and Height assignment problem
Problem Description: A 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
Workaround: Use pointer uniformly

InnerText can work in IE, but not in Firefox.
Need textcontent.
Workaround:
if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). InnerText = "my text";
} else{
document.getElementById (' element '). Textcontent = "my text";
}

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

Width and padding in CSS
Width widths in IE7 and FF do not include padding, and padding are included in Ie6.

FF and Iebox models explain inconsistencies resulting in a 2px difference
Box.style{width:100;border 1px;}
ie understood as Box.width = 100
FF understood as Box.width = 100 + 1*2 = 102//plus Border 2px

Workaround: div{margin:30px!important;margin:28px;}
Note that the order of the two margin must not be written counter, IE does not recognize!important this attribute, but other browsers can be recognized. So under IE actually explains this: div{maring:30px;margin:28px}
Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;

IE5 and IE6 's box explanations are inconsistent.
IE5 under div{width:300px;margin:0 10px 0 10px;}
The width of the div is interpreted as 300px-10px (right padding) -10px (left padding), the final div width is 280px, and the width on IE6 and other browsers is calculated as 300px+10px (right padding) +10px (left padding) =320px. At this point we can make the following changes Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}

UL and ol list indent issues
Eliminate the UL, OL and other list of indentation, the style should be written as: list-style:none;margin:0px;padding:0px;
It is verified that in IE, setting margin:0px can remove the upper and lower left and right indent, blank and list number or dot of list, setting padding has no effect on style; in Firefox, setting margin:0px can only remove upper and lower whitespace, set padding:0 Only the left and right indents can be removed after PX, and List-style:none must be set to remove the list number or dot. In other words, in IE, only set margin:0px can achieve the final effect, and in Firefox must be set margin:0px, padding:0px and list-style:none three items to achieve the final effect.

23. Element Horizontal Centering Problem
ff:margin:0 Auto;

IE: Parent {text-align:center;}

Vertical Center problem for Div
Vertical-align:middle; Increase the line spacing as high as the whole div: line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to wrap.

Question of double margin
A div set to float doubles the margin set under IE. This is a bug that exists in a IE6. The solution is to add display:inline to this div;

For example:

<div id= "Imfloat" >
The corresponding CSS is
#imfloat {
Float:left;
Margin:5px;/*ie understood as 10px*/
Display:inline;/*ie under the 5px*/}

About IE with width and height issues
IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height.

For example, to set the background image, this width is more 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;}

27. Minimum width of the page
As the previous problem, IE does not recognize min, to achieve the minimum width, the following methods can be used:

#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 only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment.

3 pixel bug in div floating ie text
The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 3px 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 the key}
<div id= "box" >
<div id= "left" ></div>
<div id= "right" ></div>
</div>

The problem of IE hide and seek
When the div application is complex, there are some links in each column, and the div is prone to hide-and-seek problems.

Some content does not show up when the mouse selects this area is found content is indeed on the page.

WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.

The div closure of float, clear float, adaptive height
① Example: <div id= "Floata" ><div id= "FLOATB" ><div id= "NOTFLOATC" >

The NOTFLOATC here do not want to continue panning, but want to go down the line. (where the properties of Floata and FLOATB have been set to float:left;)

This code is no problem in IE, the problem is in FF. The reason is that NOTFLOATC is not a float label and the float label must be closed. In <div class= "FLOATB" ><div class= "NOTFLOATC" > Add <div class= "clear" > this div must be aware of the position, and it has to be in the same class as two div with a float attribute, There cannot be a nested relationship between the two, otherwise an exception is generated. And the clear style is defined as follows:. Clear{clear:both;}

② as an external wrapper div do not set dead height, in order to allow the height of self-adaptation, to wrapper inside add Overflow:hidden; When the box containing float, the height of adaptive under IE invalid, this time should trigger the layout of IE private property (evil ie Ah!). ) with zoom:1, can be done, so that the compatibility is achieved.
For example a certain wrapper is defined as follows:

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

③ for typography, the CSS description we use most probably is float:left. Sometimes we need to do a uniform background behind the float div in the n column, for example:

<div id= "Page" >

<div id= "left" ></div>
<div id= "center" ></div>
<div id= "right" ></div>

</div>

For example, we want to set the background of the page to blue, so that the background color of all three columns is blue, but we will find that as the left center of right is stretched downward, and the page actually saves the height unchanged, the problem is because the page is not a float property, And our page is to be centered, cannot be set to float, so we should solve this:

<div id= "Page" >

<div id= "bg" style= "float:left;width:100%" >

<div id= "left" ></div>
<div id= "center" ></div>
<div id= "right" ></div>

</div>

</div>

Then embed a float left and the width is 100% div resolved.

④ Universal float closed (very important!)

The principle of clear float can be found in [how to clear floats without Structural Markup], add the following code to the global CSS, the need to close the div plus class= "clearfix", repeated Try to be uncomfortable.

/* 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 block-element-level table}

31. Highly non-adaptable
Height intolerance is when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner object uses margin or padding.

Cases:

#box {}
#box p {margin-top:20px;margin-bottom:20px; text-align:center;}
<div id= "box" >
The contents of the <p>p object </p>
</div>

Workaround: Add 2 empty div object CSS code {Height:0px;overflow:hidden;} to the P object. Or add the border attribute to the Div.

There are voids in the IE6 film.
There are many tricks to fix this bug, either to change the layout of the HTML, or to set the IMG to Display:block or set the Vertical-align property to vertical-align:top/bottom/middle/ Text-bottom can all be solved.

33. Text Input Box
Plus vertical-align:middle;

<style type= "Text/css" >
<!--
Input {
width:200px;
height:30px;
border:1px solid red;
Vertical-align:middle;
}
-
</style>

Verified that the next version of IE is not applicable, and FF, Opera, Safari, Chrome are all ok!

When content in Li is longer than the length, it is displayed as an ellipsis
This technique works with IE, Opera, Safari, Chrom Browser, FF temporarily not supported.

<style type= "Text/css" >
<!--
Li {
width:200px;
White-space:nowrap;
Text-overflow:ellipsis;
-o-text-overflow:ellipsis;
Overflow:hidden;
}

-
</style>

35. Why IE Cannot set scroll bar color in Web Standard
The solution is to replace body with HTML

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<style type= "Text/css" >
<!--
HTML {
Scrollbar-face-color: #f6f6f6;
Scrollbar-highlight-color: #fff;
Scrollbar-shadow-color: #eeeeee;
Scrollbar-3dlight-color: #eeeeee;
Scrollbar-arrow-color: #000;
Scrollbar-track-color: #fff;
Scrollbar-darkshadow-color: #fff;
}
-
</style>

36. Why can't I define a container with around 1px height?
IE6 This problem is due to the default row height, there are a number of techniques to solve:

Example: Overflow:hidden zoom:0.08 line-height:1px

16. How can I make the layer appear above flash?

The workaround is to set the flash to transparent

<param name= "wmode" value= "Transparent"/>

37. Link (A-label) border and background
A link with border and background color, need to set Display:block, and set Float:left guarantee not wrap. Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar.

38. Hover style does not appear after hyperlink access
The clicked Hyperlink style is not hover and active, many people should have encountered this problem, the solution is to change the order of CSS properties: l-v-h-a

Code:

<style type= "Text/css" >
<!--
A:link {}
a:visited {}
a:hover {}
a:active {}
-
</style>

Form Labels
This tag in IE, will automatically margin some margins, and in the FF margin is 0, so if you want to show consistency, so it is best to specify the margin and padding in the CSS, for the above two issues, my CSS is generally used first in the style Ul,form {margin:0;padding:0;}.

40. Attribute selector (this is not compatible, is a bug to hide CSS)
p[id]{}div[id]{}

This is hidden for IE6.0 and IE6.0 versions, FF and opera. There is a difference between the property selector and the child selector, the range of the sub-selector is reduced in form, the range of the property selector is larger, such as P[id], and all P tags have the same type of ID.

41. Why the text in FF cannot open the height of the container
The container of fixed height value in standard browser is not open like IE6, then I want to fixed height, and want to be able to be open how to set it? The way is to remove height setting min-height:200px; Here in order to take care of the IE6 do not know min-height can be defined as:

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

46 Common browser compatibility issues Big Summary