1. HTML object acquisition problem

FireFox: document.getElementById("idName");
ie:document.idname or document.getElementById("idName").
Solution: use document.getElementById("idName");

2. const problem

Note: In Firefox, you can use the const keyword or the var keyword to define constants; in
IE, you can only use the var keyword to define constants.
Solution: Use the var keyword to define constants uniformly.

3. Event.x and event.y issues

Explanation: Under IE, the event object has x, y attributes, but no pageX, pageY attributes;
under Firefox, the event object has pageX, pageY attributes, but no x, y attributes.
Solution: Use mX(mX = event.x? event.x: event.pageX;) instead of event.x under IE or event.pageX under Firefox.

4. window.location.href problem

Note: Under IE or
Firefox2.0.x , you can use window.location or window.location.href; under Firefox1.5.x, you can only use window.location.
Solution: Use window.location instead of window.location. href.

5. Frame problem

Take 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: You can only use window.frameName to access this frame object.
In addition, you can use window.document.getElementById("frameId") to access this frame object in both IE and Firefox.
(2) Switch frame content:
in IE and In Firefox, you can use window.document.getElementById("testFrame").src = "xxx.html" or window.frameName.location = "xxx.html" to switch the content of the frame.
If you need to return the parameters in the frame The parent window (note that it is not an opener, but a 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: In IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; not in Firefox.
Solution: directly use window.open(pageURL,name,parameters) to open new windows.
If you need 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.document.getElementById("Aqing").value = " Aqing";

7. The difference between firefox and IE's parent element (parentElement)

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

8. document.formName.item(”itemName”) 问题

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

9. Collection object problem

Problem description: In IE, you can use () or [] to get collection objects; in Firefox, you can only use [] to get collection objects.
Solution: Use [] uniformly to obtain collection objects.

10. Custom attribute issues

Problem description: In IE, you can use the method of getting general attributes to get custom attributes, or you can use getAttribute() to get custom attributes; in Firefox, you can only use getAttribute() to get custom attributes.
Solution: Get custom attributes uniformly through getAttribute().

11. Input.type attribute problem

Problem description: The input.type attribute is read-only under IE; but the input.type attribute under Firefox is read-write.
Solution: Do not modify the input.type attribute. If you must modify it, you can hide the original input first, and then insert a new input element at the same position.

12. Event.srcElement problem

Problem description: Under IE, the even object has the srcElement attribute, but not the target attribute; under Firefox, the even object has the target attribute, but there is no srcElement attribute.
Solution: Use srcObj =event.srcElement ?event.srcElement: event.target;
If you consider the 8th question, just use myEvent instead of event.

13. Body loading problem

Problem description: The body object of Firefox exists before the body tag is completely read by the browser; while the body object of IE must exist after the body tag is completely read by the browser.
[Note] This question has not been verified in practice, and will be modified after verification.
[Note] It has been verified that the above problems do not exist in IE6, Opera9 and FireFox2. A pure JS script can access all objects and elements that have been loaded before the script, even if the element has not been loaded yet.

14. Event delegation method

Problem description: Under IE, use document.body.οnlοad = inject; where functioninject() has been implemented before; under Firefox, use document.body.οnlοad = inject();
Solution: use document.body uniformly. οnlοad=newFunction('inject()'); Or document.body.onload = function(){/* Here is the code*/}
[Note] The difference between function and function.

15. Table operation problem

Problem description: ie, firefox and other browsers have different operations on the table tag. In ie, it is not allowed to assign values to the innerHTML of table and tr. When using js to add a tr, the appendChild method does not work.
Solution: //Add a blank row 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 to directly manipulate the table, this problem has not been encountered. It is recommended to use the JS framework set to operate the table, such as JQuery.

16. Object width and height assignment problem

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 uniformly

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

需用textContent。
解决方法:
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

Width does not include padding in IE7 and FF, but includes padding in Ie6.

5. The inconsistent interpretation of FF and IEBOX models results in a 2px difference

box.style{width:100;border1px;}
ie understood as box.width =100
ff understood as box.width =100 + 1*2 = 102 //Add a border of 2px

Solution: div{margin:30px!important;margin:28px;}
Note that the order of these two margins must not be reversed. IE does not recognize the !important attribute, but other browsers can. Therefore, it is actually interpreted as follows under IE: div{maring:30px;margin:28px} is
repeatedly defined and executed according to the last one, so you can’t just write margin:XXpx!important;

6. The BOX interpretation of IE5 and IE6 are inconsistent

Under IE5 div{width:300px;margin:0 10px 0 10px;}
The width of the div will be interpreted as 300px-10px (right padding)-10px (left padding), the final div width is 280px, while in IE6 and other browsers The upper width of the device is calculated by 300px+10px(right padding)+10px(left padding)=320px. At this time, we can modify the div as follows: {width:300px!important;width /**/:340px;margin:0 10px 0 10px}

7. Indentation of ul and ol lists

When eliminating the indentation of ul, ol and other lists, 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, and right indents and blanks of the list. As well as the list number or dot, setting padding has no effect on the style; in Firefox, setting margin:0px can only remove the upper and lower white space, setting padding:0px can only remove the left and right indentation, and you must also set list-style:none. Remove list numbers or dots. In other words, only margin:0px can be set in IE to achieve the final effect, while in Firefox, margin:0px, padding:0px and list-style:none must be set at the same time to achieve the final effect.

8. Element level centering problem

FF: margin:0auto;

IE: parent {text-align:center;}

9. Div's vertical centering problem

vertical-align:middle; Increase the line spacing to the same height as the entire DIV: line-height:200px; Then insert the text, and it will be centered vertically. The disadvantage is to control the content not to wrap.

10. The problem of doubling margin

The margin of the div set to float will be doubled under ie. This is a bug that exists in ie6. The solution is to add display:inline;

E.g:

<divid=”imfloat”>The
corresponding css is
#imfloat{
float:left;
margin:5px;/*under IE it is understood as 10px*/
display:inline;/*under IE it is understood as 5px*/}

11. IE and width and height issues

IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This is a big problem. If you only use width and height, these two values will not change in normal browsers. If you only use min-width and min-height, the width and height are not set in IE.

For example, if you want to set a background image, 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 in the previous question, 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 the second line uses Javascript, which is only recognized by IE, which will also make your HTML document less formal. It actually realizes the minimum width through the judgment of Javascript.

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

The object on the left floats, the right is positioned with the left margin of the outer patch, and the text inside the object on the right will have a 3px space from the left.

#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>

14. The problem of IE hide and seek

When the div application is complicated, there are some links in each column, and the problem of hide-and-seek is prone to occur at this time such as DIV.

Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page.

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

15. Close the float div; clear the float; adaptive height

① For example: <div id = "floatA" > <div id = "floatB"> <div id = "NOTfloatC">

The NOTfloatC here does not want to continue panning, but wants to go down the row. (The attributes of floatA and floatB have been set to float: left;)

This code has no problem in IE, the problem lies in FF. The reason is that NOTfloatC is not a float tag, and the float tag must be closed. Add <div class=”clear ”> between <divclass=”floatB”><div class=”NOTfloatC”>. This div must pay attention to its position, and it must be at the same level as two divs with float attributes . There can be no nesting relationship, otherwise an exception will occur. And define the style of clear as follows: .clear{clear:both;}

② Do not set the dead height for the div as an external wrapper. In order to make the height adaptive , add overflow: hidden; when the box contains float, the height adaptation is invalid under IE, and IE should be triggered at this time Layout private attributes (the evil IE!) can be done with zoom:1;, so that compatibility is achieved.
For example, a certain wrapper is defined as follows:

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

③For typesetting, the CSS description we use most may be float:left. Sometimes we need to make a unified background behind the float div in the n column, such as:

</div>

For example, we need to set the background of the page to blue to achieve the purpose of the background color of all three columns being blue, but we will find that as the left centerright pulls down, the page actually keeps the same height, and the problem is coming. , The reason is that page is not a float attribute, and our page cannot be set to float because it needs to be centered, so we should solve it like this:

</div>

Then embed a float left and the width is 100% DIV to solve it.

④ Universal float closure (very important!)

For the principle of clear float, please refer to [How To ClearFloats Without Structural Markup]. Add the following code to Global CSS, and add class="clearfix" to the div that needs 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 */

Or set it like this: .hackbox{display:table; //Display the object as a block element-level table}

16. Highly unsuitable

Height inadaptability means that the outer height cannot be adjusted automatically when the height of the inner object changes, especially when the inner object uses margin or padding.

Example:

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

Solution skills: add 2 empty div object CSS code {height:0px;overflow:hidden;} above and below the P object or add the border attribute to the DIV.

17. There are gaps under the picture under IE6

There are many techniques to solve this bug, which can be to change the html layout, or set img to display:block or set the vertical-align attribute to vertical-align:top/bottom/middle/text-bottom.

18. Align the text with the text input box

Add vertical-align: middle;

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

19. After the content in LI exceeds the length, it is displayed with an ellipsis

This technique is applicable to IE, Opera, safari, chrom browsers, and FF does not currently support it.

-->
</style>

20. Why can't IE set the color of the scroll bar in the 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">

＜/style>

21. Why can't I define a container with a height of about 1px

This problem under IE6 is caused by the default row height, and there are many solutions to it:

例如:overflow:hidden　 zoom:0.08 　line-height:1px

16. How can the layer be displayed on FLASH?

The solution is to set FLASH transparency

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

22. Link (a tag) border and background

a For linking with border and background color, you need to set display: block, and set float: left to ensure no line breaks. Refer to menubar, set height for a and menubar to avoid dislocation of bottom display, if height is not set, you can insert a space in menubar.

23. The hover style does not appear after the hyperlink is visited

The hyperlink styles that have been clicked and visited no longer have hover and active. Many people should have encountered this problem. The solution is to change the order of CSS properties: LVHA

Code:

24. FORM label

In IE, this tag will automatically margin some margins, while in FF, the margin is 0. Therefore, if you want to display the same, it is best to specify margin and padding in css. For the above two problems, my css In general, the style ul,form{margin:0;padding:0;} is used first.

25. Attribute selector (this is not compatible, it is a bug that hides css)

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

This is hidden for versions below IE6.0 and IE6.0, and FF and OPera work. There is still a difference between attribute selectors and sub-selectors. The range of sub-selectors is reduced from the form, and the range of attribute selectors is relatively large. , As in p[id], all p tags with id are the same.

26. Why can't the text under FF support the height of the container

A container with a fixed height value in a standard browser will not be opened like in IE6, so I want to have a fixed height, and how do I need to set it to be able to be opened? The way is to remove the height setting min-height: 200px; here in order to take care of IE6 that does not know min-height, it can be defined as follows:

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

27. Input is capitalized in time

onchange is triggered when the focus is lost. Oninput enters and exits Chinese, there will be repeated texts, use css uppercase, lose the focus and set the real value to uppercase

<input style="text-transform: uppercase" onchange="this.value=this.value.toUpperCase()" type="text" class="datainp carNo">

28: The code that needs to be added for mobile terminal development

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
<meta name="viewport" content="initial-scale=1,  user-scalable=no",maximum-scale=1, minimum-scale=1>

29: 1px border problem

#ele:before{
            content:'';
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #ccc;
            width: 200%;
            height: 200%;
            box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            -webkit-transform-origin: left top;
            transform-origin: left top;
}

Summary of web front-end compatibility issues