Web front-end addresses browser compatibility issues

1. HTML Object access problem

FireFox:document.getElementById ("Idname");
Ie:document.idname or document.getElementById ("Idname").
Solution: Unified use of document.getElementById ("Idname"); 2. The question of the const

Description: Firefox, you can use the Const keyword or the var keyword to define constants;
In IE, constants can only be defined using the var keyword.
Workaround: use the var keyword uniformly to define constants. 3. Event.x and Event.y issues

Note: Under IE, the event object has x,y attribute, but there is no pagex,pagey attribute;
Firefox, the event object has a Pagex,pagey property, but no x,y attribute.
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 question

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 problem

The

takes the following frame as an example:
<frame   src= "xxx.html"    id= "Frameid"   name= "FrameName"   />
(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 use Window.framename to access this frame object.
In addition, Window.document.getElementById ("Frameid") can be used in IE and Firefox to access this frame object.
(2) Toggles the frame content:
You can use Window.document.getElementById ("Testframe") in both IE and Firefox .src   =   "xxx.html" or window.framename.location   =   "xxx.html" to toggle the contents of the frame.
If you need to pass parameters in a frame back 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. For example: parent.document.form1.filename.value= "aqing"; 6. Modal and non-modal window issues

Note: Under IE, modal and modeless windows can be opened by ShowModalDialog and showModelessDialog. Firefox is not.
Workaround: Open the new window directly using the window.open (Pageurl,name,parameters) method.
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") question

Problem description: Under IE, you can use Document.formName.item ("ItemName") or document.formname.elements["ElementName"];firefox, You can only use the document.formname.elements["ElementName"].
Workaround: unify the use of document.formname.elements["ElementName"]. 9. Collection Class object problem

Problem Description: IE, you can use () or [] Get collection Class objects, Firefox, can only use [] Get collection class objects.
Workaround: use [] to get collection class objects uniformly. 10. Custom attribute issues

Problem Description: IE, you can use to get the general properties of the method to obtain custom attributes, can also be used getattribute () derived from the definition of properties, Firefox, can only use getattribute () derived from the definition of attributes.
Workaround: The unification is obtained from the defined attribute through GetAttribute (). input.type attribute problem

Problem Description: IE under the Input.type property is read-only, but Firefox under the Input.type property is read and 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. question of Event.srcelement

Problem description: Under IE, the even object has srcelement properties, but there is no target attribute; Under Firefox, even objects have the target attribute, but there is no srcelement attribute.
Solution: use srcobj =event.srcelement event.srcElement:event.target;
If the 8th question is considered, replace the event with MyEvent instead. Body loading problem

Problem Description: Firefox's body object in the body tag is not fully read by the browser before the existence, and IE's body object must be in the body tag is fully read into the browser after the existence.
[note] This problem has not been validated and will be modified after verification.
[note] There are no such problems in IE6, Opera9, and FireFox2, and simple JS scripts can access all the objects and elements that have been loaded before the script, even if the element is not yet loaded. 14. Event Delegate Method

Problem Description: IE, the use of document.body.onload= inject; where Functioninject () has been implemented before, in Firefox, the use of document.body.onload= inject ();
Solution: Unified use of document.body.onload=newfunction (' inject () '); or document.body.onload = function () {/* Here is the code */}
Attention The difference between function and function. table operation problem

Problem description: IE, Firefox and other browsers for table label operation are different, in IE not allowed to table and TR innerHTML assignment, use JS to add a TR, use the AppendChild method also no use.
Workaround://Append a blank line to 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 directly to manipulate the table, this problem has not been encountered. It is recommended that you use the JS framework set to manipulate the table, such as jquery. 16. Object width and height assignment problem

problem Description: Firefox similar obj.style.height =imgobj.height statements are invalid.         øcss 1 . Cursor:hand VS cursor:pointer

Firefox does not support hand, but IE supports pointer
Workaround: Unified use of pointer 2 innertext in IE can work, but not in Firefox.

Requires textcontent.
Workaround:
if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). innertext = "my text";
} else{
document.getElementById (' element '). Textcontent = "my text";
} 3. CSS Transparent

IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6. 4. Width and padding in CSS

width widths in IE7 and FF do not include padding, including padding in Ie6. 5. The discrepancy between FF and Iebox model interpretation leads to a difference of 2px

box.style{width:100;border1px;}
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 these two margin must not be written in reverse, IE does not recognize the!important attribute, but other browsers can recognize it. So in the case of IE, the explanation is as follows: div{maring:30px;margin:28px}
Repeat the definition according to the last one to execute, so can not only write margin:xxpx!important; 6. 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 is 280px in width, and the width on IE6 and other browsers is 300px+10px (right padding) +10px (left padding) =320px. At this point we can do the following modification Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px} 7. UL and ol list indent problem

Elimination of UL, OL and other lists of indentation, style should be written: list-style:none;margin:0px;padding:0px;
After verification, in IE, the setting margin:0px can eliminate the top and bottom indent of the list, blank and list number or dot, set padding have no effect on the style; in Firefox, setting the margin:0px can only remove up and down whitespace, setting padding:0 PX can only remove the left and right indentation, you must also set the List-style:none to remove the list number or dot. In other words, in IE only set margin:0px to achieve the final effect, and in Firefox must be set margin:0px, padding:0px and List-style:none three to achieve the final effect. 8. Element Horizontal Center problem

Ff:margin:0auto;

IE: parent {text-align:center;} 9. Div's Vertical center problem

Vertical-align:middle; Adds line spacing to the same height as the entire div: line-height:200px; then inserts the text and centers vertically. The disadvantage is to control the content do not change lines. question of double margin

Div set to float will double the margin set under IE. This is a bug that IE6 all exist. The solution is to add display:inline to the div;

For example:

<divid= "Imfloat" >
The corresponding CSS is
#imfloat {
Float:left;
Margin:5px;/*ie under the understanding of 10px*/
The Display:inline;/*ie is then understood as 5px*/ } 11. ie and width and height of the problem

IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This problem is large, if only with the width and height, the normal browser in the two values will not change, if only with Min-width and min-height, ie below is not set width and height.

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;} 12. The minimum width of the page

As the previous issue, IE does not recognize min, to achieve the minimum width, you can use the following methods:

#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 through JavaScript's judgment. div floating IE text produces 3 pixel bugs

The left side of the object floating on the right side of the outer patch to locate the left margin, the right object within the text will be left with 3px spacing.

#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 id= "right" ></div> 14. The problem of IE Hide-and-seek

When the div application is complex, there are some links in each column, div and so on this time is prone to hide and seek.

Some content does not show up when the mouse selects this area is found to be true 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 of float is closed; clear float; Adaptive height

① Example:

The NOTFLOATC here do not want to continue to translate, but want to row down. (where the Floata, FLOATB properties have been set to float:left;)

This code has no problem with IE, the problem is ff. The reason is that NOTFLOATC is not a float label and the float label must be closed. In the

this div must pay attention to the location, and A nested relationship cannot exist between two div siblings that have a float property, or an exception is generated. and define clear this style as follows:. Clear{clear:both;}

② as an external wrapper div do not set dead height, in order to allow the height can be adaptive, to add Overflow:hidden in the wrapper; When the box contains float, highly adaptive in IE invalid, this time should trigger IE layout private properties (evil ie AH. ) with zoom:1; Can be done, so that the compatibility is achieved.
For example, a wrapper is defined as follows:

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

③ for typography, the most common CSS description we use is probably float:left. Sometimes we need to do a unified background behind the N-column float div, for example:

<div id= "Page" >

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

</div>

For example, we want to set the background of the page to blue to achieve the background color of all three columns is blue, but we will find that with the left centerright down, and page incredibly save height, the problem is, because page is not a float property, And our page can't be set to float because it's centered, so we should fix this:

<div id= "Page" >

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

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

</div>

</div>

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

④ Universal Float closure (very important!)

On the principle of clear float, see [How to Clearfloats without structural Markup], add the following code to the global CSS, the need to close the div plus class= "clearfix" can be, repeatedly try Upset.

/* 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 * *

or This setting:. hackbox{display:table;//Display the object as a block element-level table } 16. Height not suitable

Height is not adaptable when the height of the inner object changes when the outer height is not automatically adjusted, especially when the inner object uses margin or padding.

Cases:

#box {background-color: #eee;}
#box p {margin-top:20px;margin-bottom:20px; text-align:center;}
<div id= "box" >
<p>p the contents of the object </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. IE6 under the picture there is a gap produced

There are a lot of tricks to fix this bug, either by changing the layout of the HTML, or by setting IMG to Display:block or setting the Vertical-align attribute to vertical-align:top/bottom/middle/ Text-bottom can all be solved. 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 OK. When the content exceeds the length in the Li, the ellipsis is displayed.

This technique is applicable 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> 20. Why IE cannot set the scroll bar color in web standards

The solution is to replace the body with HTML

<! doctypehtml 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;
}
-->
21. Why can't I define a container with a height of around 1px

IE6 This problem is due to the default row height, there are many solutions:

For example: Overflow:hidden zoom:0.08 line-height:1px

16. How can I let the layer display above flash?

The solution is to set the flash transparent

<paramname= "wmode" value= "Transparent"/> 22. Border and background of link (a label)

a link with border and background color, you need to set Display:block, while setting float:left guarantee do not wrap. Refer to MenuBar, to 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. 23. The problem that hover style does not appear after the hyperlink is accessed

The hyperlinks that have been clicked are not hover and active, and many people should have encountered this problem, the trick is to change the order of CSS attributes: l-v-h-a

Code:

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

this label in IE, will automatically margin some margins, and in the FF margin is 0, so if you want to show consistent, so it is best to specify margin and padding in CSS, for the above two issues, my CSS is generally the first to use this style of UL, form{margin:0;padding:0}. 25. Property selector (This is not compatible, is a hidden CSS bug)

p[id]{}div[id]{}

This is hidden from the IE6.0 and IE6.0 versions, FF and opera. There is a difference between the property selector and the child selector, and the scope of the child selector is reduced in form, and the property selector is larger in scope, as in P[id], all of the P tags have the same type of ID. 26. Why FF under the text can not open the height of the container

Standard browser fixed height value of the container is not as IE6 as the open, then I want to fixed height, but also want to be able to be stretched how to set it. method is to remove the height set min-height:200px; Here to take care of the IE6 that don't know min-height can be defined like this:

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