Summary of compatibility issues with web front end

1. Getting problems with HTML objects

Unified use: document.getElementById ("Idname");

2.Const Problem

Use the var keyword uniformly to define

3, Event.x and EVENT.Y problems

There is no page.x,page.y property under IE, there are x, Y properties

Firifox, there is a page.x,page.y property, but there is no X, Y property

4, Window.location.href problem

Use window.location to replace Window.location.href.

5, Frame problem

(1), accessing the IFrame object

Unified use: Window.document.getElementById ("Testframe")

(2), switch IFRAME content

IE and ff:window.document.getElementById ("Testframe"). src = "xxx.html" or

Window.frameName.location = "xxx.html" to toggle the contents of the frame

If you need to pass parameters from the IFRAME back to the parent window, you can use patent in the frame to access the parent window

Parent.document.form1.filename.value = ' aqing ';

6. Modal and non modal window problems

Open a new window directly using window.open (pageurl,name,parameters)

You can use Window.opener in a child window to access the parent window

7, the difference between the FF and IE parent elements

Unified use of Obj.parentnode

8, Document.form.Name.item (' itemname ') problem

Unified use: document.formname.elements[' elementname '].

9. Collection Class object problem

Uniform use "" to Get Collection class objects

10. Custom Attributes

Unified: GetAttribute () obtained from the defined attribute

11, Event.srcelement problem

Use: Srcobj = Event.srcelement?event.srcelement:event.target;

12. Event Delegation Method

Document.body.onload = new Function (' inject () ') or document.body.onload = function () {/Here is code/}

13. Table Operation Problems

The innerHTML Assignment of table and TR is not allowed in IE, and the AppendChild method is not used when adding a tr using JS.

var row = Otable.insertrow (-1);

var cell = document.createelement ("TD");

cell.innerhtml = ""

Cell.classname = "xxx";

Row.appendchild (cell);

General Framework Operation table

Css

1,innertext in IE can work normally, but not in FF.

Workaround:

if (Navigator.appName.indexOf ("Exploror") >-1) {

document.getElementById ("element"). InnerText = ' my text ';

}else{

document.getElementById (' element '). Textcontent = "my text";

}

4. Width and padding in CSS

The width in IE7 and FF does not include padding, which includes padding in IE6.

5, FF and IE box model interpretation inconsistencies resulting in a difference of 2px

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

Ie:box.width = 100

Ff:box.width = 100 + 1*2 = 102 (plus border)

Workaround: div{margin:30px!important;margin:28px}

6, IE5 and IE6 box explanation is not the same

div{width:300px!important;width:/**/:340px;margin:0 10px 0 10px}

7, eliminate ull and OL of the indentation problem

Style: list-style:none;margin:0px;padding:0px;

8, Horizontal Center:

ff:margin:0 Auto;

IE: Parent: {Text-align:center}

9. Vertical center of Div

Vertical-align:middle; line-height:200px; disadvantage: To control content cannot be wrapped

10, margin doubling problem

Setting float's Div will double the margin set under IE. Solve in div add display:inline;

11, IE and width and height of the problem

IE does not know min-this definition

#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

#container {min-width:600px;width:expression (Document.body.clienWidth < 600?) 600px ":" Auto ")}

The first min-width normal, the width of the second line uses JS, this is only IE to recognize, which will make your HTML Pomelos not too formal

13, div floating IE text generated 3 pixels of the bug

The left object floats, the right side is positioned with an indefinite left margin, and the text within the right object is spaced 3px from the left.

#box {float:left;width:800px}

#left {float:left;width:50%}

#right {width:50%}

#left {margin-left:-3px}

14. IE's hide-and-seek problem

When Div is complex, div is prone to hide and seek.

Workaround: Use the Line-height property or give the fixed width height

15. Float Div closed; clear float, adaptive height

(1), <div id= "Floata" > <div id= "FLOATB" > <div id= "NOTFLOATC" >

Here C wants to go down, need to add <div class= "clear" in the middle of FLOATB and NOTFLOATC >

. Cleat{clear:both;}

(2) as an external wrapper div do not set dead height, in order to let the height of adaptive, to wrapper inside add overflow:hidden; When the box containing float, the height of adaptive under IE is invalid, It's time to go. IE layout private properties with Zoom:1, can be achieved compatible

. 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 id= "center" ><div id= "right" >

</div>

For example, we want to set the page's background to blue, to achieve all three columns of the background color is blue, but we will find that with the left centerright is stretched downward, and page incredibly save the height of the same, 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 id= "center" ><div id= "right" >

</div>

</div>

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

④ Universal float closed (very important!)

For the principle of clear float see [How to Clearfloats without Structural Markup], add the following code to the global CSS, add class= "Clearfix" to the div that needs to be closed, 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 */

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

16. 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 </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.

17. IE6 There are voids in the 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.

18. 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 exceeds 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>

20. Why IE Cannot set scroll bar color in Web Standard

The solution is to replace 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 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

<paramname= "wmode" value= "Transparent"/>

22. 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.

23. 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 label

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;}.

25. 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.

26. 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;
}

1. The size of the text itself is not compatible. The same is the font-size:14px text, in different browsers occupy the space is not the same, ie under the actual account of 16px, under the white 3px,ff under the actual high 17px, left white 1px, under the white 3px,opera under the same. Solution: Set the text to Line-height. Make sure that all text has a default line-height value. This is important and we cannot tolerate 1px differences in height.

2.ff under the height of the container, that is, the container defines the height, the shape of the container border is determined, will not be content to support large, and IE will be the content of the large, high-limit failure. So don't make it easy to define height for the container.

3. The problem of bursting the container horizontally. If the float container does not have a defined width, the contents of the FF are as open as possible to the container width, and the content wrapping is preferred under IE. Therefore, the content may burst the floating container needs to define the width.

4. The most hated, Double-margin bug. IE6 the floating container is defined margin-left or margin-right the actual effect is twice times the value. Solution to define the display:inline for the floating container.

5.mirror margin bug, when the outer element has a float element, the outer element, such as defining margin-top:14px, will automatically generate MARGIN-BOTTOM:14PX. Padding will also appear similar problems, are IE6 under the special products, the situation of such bugs is more complex, far more than this one of the conditions, has not been systematically organized. Solution: The outer element is set to border or set float.

6. Devouring the phenomenon. Or IE6, up and down two Div, the above div set the background, but found that the following does not set the background of the DIV also has a background, this is the devouring phenomenon. Corresponding to the above background devouring phenomenon, there is the phenomenon of scrolling down the border missing. Solution: Use Zoom:1. This zoom seems to be specifically designed to solve IE6 bugs.

8.img under the white, we look at this code is what the problem:

<div>

</div>

To open the div's border, you find that the bottom of the picture is not close to the bottom of the container, is an img behind the white space character, to eliminate the need to write

<div>
</div>

The last two labels are next to each other. This bug still exists under IE7. Solution: Set Display:block to IMG.

9. Loss of Line-height. <div style= "line-height:20px" > text </div> Unfortunately, the single-line text IE6 effect disappears in line-height ... , because This inline-block element and the inline element are written together. Solution: let img and text float together.

The 10.clear layer should be used alone. Maybe you want to save the code to put the clear attribute directly to a content layer below, so there is a problem, not only FF and OP lost the margin effect, ie some margin value will also be invalidated
<div style= "Background:red;float:left;" >dd</div>
<div style= "Clear:both;margin-top:18px;background:green" >ff</div>

11.ie Overflow:hidden is not valid 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 Overflow-x or overflow-y features, IE7, FF does not support.

12.ie6 a serious bug,float element without a defined width, if the inner div defines the height or zoom:1, the DIV will fill a whole line, even if you give the width. The float element should be given a width if it is used as a layout or a complex container.

13.ie6 under the absolute positioning of the div contains a relative positioning of the div, if the inner layer relative positioning of the div height height concrete value, the inner layer relative layer will have a width value of 100%, the outer layer will be large. The solution gives the inner layer a float property relative to the layer.

14.width:100% this thing in IE is very convenient, will search the width of the layer upward, ignoring the impact of the floating layer, FF search to the end of the floating layer, so, can only give the middle of all the floating layer plus width:100% just line, tired ah. Opera has learned a good lesson with IE.

15, sometimes with Div{overflow:hidden} This style, the three browsers will be the same

Summary of compatibility issues with web front end