_php tutorials for common compatibility issues in IE and Firefox

1. Document.form.item Issues

(1) Existing problems:

There are many Document.formName.item ("itemname") statements in existing code that cannot be run under Firefox (Firefox)

(2) Workaround:

Use document.formname.elements["ElementName"]

2. Collection Class object issues

(1) Existing problems:

Many collection class objects in existing code use (), IE can accept, Firefox (Firefox) cannot.

(2) Workaround:

Instead, use [] as the subscript operation. Such as:

Document.forms ("FormName") changed to document.forms["FormName"].

Another example:

Document.getelementsbyname ("InputName") (1) Changed to Document.getelementsbyname ("InputName") [1]

3. window.event

(1) Existing problems:

Using window.event cannot be run on Firefox browser

(2) Workaround:

Firefox events can only be used on the spot where the event occurred, and this issue cannot be resolved. You can work with this:

Original code (can be run in IE):

　　

...

New code (can be run in IE and Firefox):

　　
...

In addition, if the first line in the new code does not change, as with the old code (that is, the gotosubmit call does not give the parameter), it will still be available only in IE, but not in error. Therefore, the TPL part of this scheme is still compatible with the old code.

4. An issue with the ID of the HTML object as the object name

(1) Existing problems

In IE, the ID of an HTML object can be used directly as a subordinate object variable name for document. In Firefox, you can't.

(2) Workaround

Use getElementById ("Idname") instead of Idname as an object variable.

5. Problem with Idname string to get Object

(1) Existing problems

In IE, you can use Eval (idname) to get an HTML object with ID idname, not in Firefox.

(2) Workaround

Use getElementById (idname) instead of eval (idname).

6. The variable name has the same problem as an HTML object ID

(1) Existing problems

In Firefox, because the object ID is not the name of the HTML object, you can use the same variable name as the HTML object ID, ie can.

(2) Workaround

When declaring variables, add var to avoid ambiguity, which can be run normally in IE.

In addition, it is best not to take the same variable name as the HTML object ID to reduce the error.

7. Event.x and EVENT.Y issues

(1) Existing problems

In IE, the event object has x, Y properties, not in Firefox.

(2) Workaround

In Firefox, the equivalent of Event.x is Event.pagex. But not in Event.pagex ie. Therefore, the use of Event.clientx instead of event.x. This variable is also available in IE. Event.clientx and Event.pagex have subtle differences (when the entire page has scroll bars), but most of the time they are equivalent.

If you want to be exactly the same, you can be a little more troublesome: MX = event.x? Event.x:event.pagex; and use MX instead of event.x.

(3) Other

Event.layerx in IE and Firefox, there is no difference in the specific meaning has not been tested.

8. About Frame

(1) Existing problems

You can use Window.testframe to get the frame in IE, not in Firefox

(2) Workaround

The main differences between Firefox and IE in the use of frame are:

If the following attributes are written in the frame tag:

Then IE can access this frame's window object by ID or name, and Firefox can only access the frame's window object by name, for example, if the frame tag is written in the HTM inside the topmost window, Then you can access the Window object by accessing Ie:window.top.frameId or Window.top.frameName.

Firefox: This is the only way to access the Window object Window.top.frameName

In addition, Window.top.document.getElementById ("Frameid") can be used in Firefox and IE to access frame tags and can be window.top.document.getElementById ("Testframe"). src = ' xx.htm ' to toggle the contents of the frame can also be toggled by window.top.frameName.location = ' xx.htm '. A description of frame and window can be found in BBS's ' window and frame ' article and the test under the/test/js/test_frame/directory

9. In Firefox, the attributes you define must be getattribute () to get

10. No parentelement Parement.children in Firefox

ParentNode Parentnode.childnodes childNodes The meaning of the subscript is different in IE and Firefox, Firefox uses the DOM specification, the childNodes will insert a blank text node.

It is generally possible to avoid this problem by Node.getelementsbytagname ().

When nodes in HTML are missing, IE and Firefox interpret ParentNode differently, for example

The value of Input.parentnode in Firefox is form, while the value of Input.parentnode in IE is null node

There is no Removenode method in Firefox, you must use the following method Node.parentNode.removeChild (node)

11.const problem

(1) Existing problems:

The Const keyword cannot be used in IE. such as const CONSTVAR = 32; This is a syntax error in IE.

(2) Workaround:

Do not use const, instead of Var.

. Body Object

The body of Firefox exists before the body tag is fully read by the browser, and IE must be present only after the body is fully read into it.

URL encoding

In JS, if you write the URL directly & do not write & such as var url = ' xx.jsp?objectname=xx&objectevent=xxx '; frm.action = URL Then it is likely that the URL will not be properly displayed so that the parameters are not correctly uploaded to the server generally the server error parameters are not found, of course, if the exception is in the TPL, because the TPL conforms to the XML specification, requires & written as & General Firefox does not recognize JS in the &

NodeName and TagName issues

(1) Existing problems:

In Firefox, all nodes have nodeName values, but textnode do not have tagName values. In IE, the use of nodeName as if there is a problem (the situation is not tested, but my IE has been dead several times).

(2) Workaround:

Use TagName, but you should detect whether it is empty.

15. Element properties

The Input.type property is read-only under IE, but can be modified under Firefox

Issues with Document.getelementsbyname () and Document.all[name]

(1) Existing problems:

In IE, Getelementsbyname (), Document.all[name] cannot be used to get a DIV element (if there are other elements that cannot be taken yet).

17. The simplest mouse-over variant of the CSS to be changed

CURSOR:POINTER;/*FF does not support cursor:hand*/DW8 under the automatic and there is no hand this attribute, the standard is pointer

18.FF does not support filters the most common translucency is not supported.

Filter:alpha (OPACITY=50); /* for IE */
Opacity:. 5;/* for Firefox */

Style= "-moz-opacity:0.5; Filter:alpha (opacity=50); cursor:hand; "Onmouseover=" This.style.mozopacity=1;
this.filters.alpha.opacity=100 "onmouseout=" this.style.mozopacity=0.5;
This.filters.alpha.opacity=50 "

19.FF does not support expression such as removing the border of a link to write a different CSS

A,area {blr:expression (This.onfocus=this.blur ())}/* for IE */
: Focus {Outline:none;}/* for Firefox */

20.FF does not support the color settings of the div scroll bar, and there is no good way to replace it at this time.

. contendiv {
Position:absolute; left:0px; top:10px; width:580px;height:135px;
Line-height:120%;text-align:left; font-family: "Song body"; word-break:break-all; Color: #6D6E71;
Overflow-y:auto;overflow-x:no;
scrollbar-arrow-color:red; Scrollbar-track-color:f6f6f6; Scrollbar-face-color: #F6F6F6; Scrollbar-shadow-color: #F6F6F6;
Scrollbar-darkshadow-color: #F6F6F6; Scrollbar-3dlight-color: #F6F6F6; Scrollbar-highlight-color: #F6F6F6;
}
This has no effect at all in ff.

21.ie below the text below the horizontal line

border-width:0px 0px 1px 0px; inside the FF went to the text. (Check the manual or did not find a solution to the feeling strange ~ ~ The original is the FF fault tolerance is too poor, is the following width:186px;height:0px, the width of the high cause, in fact, A:haver has inherited the superior attributes, as long as the definition of different styles can be, It seems that FF helps to make standardized, concise web pages, the understanding of CSS is also more profound, for the provision of CSS is a good help)

. onelinksdiv A:hover {
Display:block;border-style:solid;color: #ff0000; border-width:0px 0px 1px 0px;
/*
Display:block;border-style:solid; border-width:0px 0px 1px 0px; width:186px;height:0px; Color: #ff0000; Font-size:14px;text-align:right;
*/
}

The following wording is normal under IE, but it is wrong under FF

. onelinksdiv A:hover {
Display:block;border: #ff0000 solid; border-width:0px 0px 1px 0px;
width:186px;height:0px; Color: #ff0000; Font-size:14px;text-align:right;
}

Related references:

Border-width:border-top-width border-right-width border-bottom-width border-left-width; P#fourborders
{
Border-width:thick medium Thin 12px;
}

If you define four values, then these four values are top, right, bottom, and left box width values (starting from the top border and traversing in a counterclockwise order).

Equivalent to the following definition

P#fourborders
{
Border-top-width:thick;
Border-right-width:medium;
Border-bottom-width:thin;
border-left-width:12px;
}

22.FF Scroll property is not supported

The Overflow:hidden must be defined, and under the HTML tag, not under the body

html{
Overflow:hidden;
}

23.FF data Island binding not supported

In IE can be loaded into the data, but to the Firefox will not load data, began to think it may be because the content of the line too much text can not be loaded, but delete only a few words after the same.

24.style= "Word-break:break-all"

When the contents of a cell in a Web page are more than one line, the line-break style defined in IE can be used normally, but it cannot be supported in Firefox. style= "Word-break:break-all" is the MS extension of IE proprietary properties, has not become a standard, so Firefox can't support it yet. However, MS has submitted it to the CSS3, which is also seen in the candidate scheme. I hope this attribute in the final decision by the CSS3 Standard, Firefox can support it. You can try this before.
Style= "Table-layout:fixed;word-wrap:break-word" (when it is in English, it will not be normal to change the line)

25. The name anchor point of IE is not supported until FF2.0

Such writing is not supported: Go back
Originally according to the grammar of the map, the label will always look for the href address and jump past, now the OnClick event and # # #这个地址又有冲突.

In order to make Firefox and IE part of the element properties compatible, that laborious, I inadvertently found that Firefox is sensitive to space:

There are spaces, anchor points function
No spaces, no anchor points
Anchor Point of the writing is very fastidious, for example, Firefox does not support anchor points, plus id= #1
Static with the page reference must be written like this:, Can not * * * * * * * * * page to use JS

Sequela came, considering the mouse style and browser compatibility began to toss:

Not compatible
Not compatible
No {...}, illegal writing belonging to script
User not caring for custom system mouse styles
I thought Firefox is a lot of people to use, but from the statistical analysis of the site to see Firefox only poor 3.18%, but compatible with his standards do spend a lot of energy! However, standardization is good for future maintenance and expansion, which is helpful for the continual prompt of technology.
-

Question 14: Overflow-y:auto;overflow-x:hidden, in IE can use No to show hidden, but in Firefox (Firefox) must use hidden

http://www.bkjia.com/PHPjc/371859.html www.bkjia.com true http://www.bkjia.com/PHPjc/371859.html techarticle 1. Document.form.item problems (1) Existing issues: There are many Document.formName.item (ItemName) statements in existing code that cannot be run under Firefox (2) Workaround: Change ...

