Common compatibility problems between ie and Firefox-PHP Tutorial

Common compatibility problems between ie and Firefox. 1.doc ument. form. item problem (1) existing problem: there are many documents in the existing code. formName. A statement such as item (itemName) cannot be run in Firefox (Firefox) (2) solution: Change 1. document. form. item problems

(1) existing problems:

Many statements such as document. formName. item ("itemName") exist in the existing code and cannot be run in Firefox.

(2) solution:

Use document. formName. elements ["elementName"]

2. collection class object problems

(1) existing problems:

In the existing code, many collection class objects are used (), which is acceptable to IE and cannot be used by Firefox.

(2) solution:

Use [] as the subscript operation. For example:

Change document. forms ("formName") to document. forms ["formName"].

Another example:

Document. getElementsByName ("inputName") (1) changed to document. getElementsByName ("inputName") [1]

3. window. event

(1) existing problems:

Window. event cannot be run on Firefox

(2) solution:

The event of Firefox can only be used in the event. this problem cannot be solved for the moment. This can be changed as follows:

Original Code (can be run in IE ):

　　

...

New code (run in IE and Firefox ):

　　
...

In addition, if the first line of the new code is not modified, it is the same as the old code (that is, the gotoSubmit call does not provide a parameter), it can only be run in IE, but no error occurs. Therefore, the tpl part of this solution is still compatible with the old code.

4. question about the id of an HTML object as the object name

(1) existing problems

In IE, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. Not in Firefox.

(2) solution

Use getElementById ("idName") instead of idName as the object variable.

5. the problem of getting an object using the idName string

(1) existing problems

In IE, eval (idName) can be used to obtain the HTML object with id as idName, which cannot be used in Firefox.

(2) solution

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

6. the variable name is the same as the id of an HTML object.

(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, which can be in IE.

(2) solution

When declaring variables, add var to avoid ambiguity, so that it can run normally in IE.

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

7. event. x and event. y

(1) existing problems

In IE, the event object has the x and y attributes, and Firefox does not.

(2) solution

In Firefox, event. x is equivalent to event. pageX. But event. pageX IE does not. Therefore, event. clientX is used instead of event. x. This variable is also available in IE. Event. clientX is slightly different from event. pageX (when the page has a scroll bar), but most of the time it is equivalent.

If it is the same, it may be a little troublesome: mX = event. x? Event. x: event. pageX; then use mX instead of event. x

(3) Others

Event. layerX is available in both IE and Firefox. there is no difference in the specific significance of this feature.

8. About frame

(1) existing problems

In IE, you can use window. testFrame to obtain the frame, but not in Firefox.

(2) solution

The main difference between Firefox and ie in frame usage is:

If the following attributes are written in the frame tag:

Then ie can access the window object corresponding to the frame through id or name, while Firefox can only access the window object corresponding to the frame through name. for example, if the above frame label is written in the top window in htm, you can access ie: window. top. frameId or window. top. frameName to access this window object

Firefox: only window. top. frameName can access this window object.

In addition, both Firefox and ie can use zookeeper top.doc ument. getElementById ("frameId") is used to access the frame tag, and you can use the parameter top.doc ument. getElementById ("testFrame "). src = 'xx.htm' to switch the frame content, you can also use window. top. frameName. location parameters 'xx.htm' to switch the frame content. for details about frame and window, see The bbs 'window and framework' article and the test under the/test/js/test_frame/directory.

9. in Firefox, the property defined by myself must be obtained by getAttribute ().

10. use parentElement parement. children in Firefox

The meanings of parentNode. childNodes and childNodes are different in IE and Firefox. Firefox inserts blank text nodes in childNodes using DOM standards.

You can avoid this problem by using node. getElementsByTagName.

When the html node is missing, IE and Firefox have different interpretations of parentNode, for example

In Firefox, the value of input. parentNode is form, while that of input. parentNode in IE is empty.

The node in Firefox does not have the removeNode method. you must use the following method: node. parentNode. removeChild (node)

11. const problems

(1) existing problems:

You cannot use the const keyword in IE. For example, const constVar = 32; in IE, this is a syntax error.

(2) solution:

Use var instead of const.

12. body object

Firefox's body exists before the body label is fully read by the browser, while IE exists only after the body is fully read.

13. url encoding

In js, if the url is written, write directly & do not write & for example, var url = 'XX. jsp? ObjectName = xx & objectEvent = xxx'; frm. action = url, it is very likely that the url will not be properly displayed, so that the parameter is not correctly transmitted to the server. Generally, the server reports an error that the parameter is not found. of course, if it is an exception in tpl, because tpl complies with xml specifications, requirements & written as & generally Firefox cannot identify js &

14. nodeName and tagName problems

(1) existing problems:

In Firefox, all nodes have a nodeName value, but textNode does not have a tagName value. In IE, nodeName usage seems to be problematic (I have not tested it but I have already died several times ).

(2) solution:

Use tagName, but check whether it is empty.

15. Element attributes

The input. type attribute in IE is read-only, but can be modified in Firefox.

16. document. getElementsByName () and document. all [name] problems

(1) existing problems:

In IE, neither getElementsByName () nor document. all [name] can be used to obtain the p element (whether there are other elements that cannot be retrieved is unknown ).

17. you need to change the css with the simplest move of the mouse over the hand.

Cursor: pointer;/* ff does not support cursor: hand */dw8. the hand attribute is not automatically displayed. The standard is pointer.

18. ff does not support filters. The most common translucent filter 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. your opacity = 1;
This. filters. alpha. opacity = 100 "onmouseout =" this. style. required opacity = 0.5;
This. filters. alpha. opacity = 50"

19. ff does not support expression. for example, to remove the border of a link, you must write different css codes.

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

20. ff does not support the color setting of the p scroll bar. Currently, there is no good replacement method.

. Contenp {
Position: absolute; left: 0px; top: 10px; width: 580px; height: 135px;
Line-height: 120%; text-align: left; font-family: ""; 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 is totally ineffective in ff.

21. ie is displayed on a horizontal line below the text

Border-width: 0px 0px 1px 0px; go to the text in ff. (I still cannot find a solution after checking the manual ~~ It turns out that the fault tolerance capability of ff is too bad, which is caused by the following width: 186px; height: 0px; width and height. In fact, a: haver has inherited the attributes of the superior, you only need to define different styles. it seems that ff helps to produce standardized and simplified Web pages and has a deeper understanding of css, which is a good help for providing css)

. Onelinksp 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 statement is normal in ie, but it is wrong in ff.

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

References:

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

If four values are defined, the four values are the width values of the top, right, bottom, and left border respectively (from the top border, traverse in a counter-clockwise order ).

It is 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 not supportedScroll attributes

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

Html {
Overflow: hidden;
}

23. ff does not support data Island binding

Data can be loaded in ie, but it cannot be loaded in Firefox. I thought it may be because there are too many lines of text in the content, and the line cannot be loaded, however, only a few words are left before deletion.

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

When the content in the cell page in the webpage exceeds one line, the line feed style defined in IE can be used normally, but cannot be supported in firefox. style = "word-break: break-all" is the IE proprietary attribute extended by MS and has not become W3C standard. Therefore, Firefox cannot support it. However, MS has submitted it to W3C, which can be seen in W3C's CSS3 candidate solutions. I hope this property will be supported by Firefox after it is finalized by W3C as the CSS3 standard. Before that, you can try
Style = "table-layout: fixed; word-wrap: break-word" (when it is in English, it cannot wrap normally)

25. Currently, FF2.0 does not support IE name anchor.

This writing method is not supported: go back
Originally, according to W3C syntax, labels always search for the href address and jump to the past. now the onclick event conflicts.

To make Firefox compatible with some IE element attributes, I accidentally found Firefox sensitive to spaces:

// There are spaces for the anchor.
// No space. the anchor has no effect.
The method of the anchor is very exquisite. for example, Firefox does not support Anchor. you must add id = #1.
When static pages are referenced in the same way, they must be written as follows:

After all, considering the compatibility of the mouse style and browser:

// Incompatible
// Incompatible
// No {...} is written illegally.
// Users who have not taken care of the custom system mouse style
I thought there were a lot of people using Firefox, but according to the statistical analysis of the website, Firefox only had a poor 3.18%, but it really took a lot of effort to be compatible with his standards! However, standardization is conducive to future maintenance and expansion, and is also conducive to constant technical prompts.
-->

Question 14: OVERFLOW-Y: auto; OVERFLOW-X: hidden; you can use no to hide in IE, but you must use hidden in FireFox.

Http://www.bkjia.com/PHPjc/371859.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/371859.htmlTechArticle1. document. form. item problem (1) existing problem: there are many documents in the existing code. formName. A statement such as item (itemName) cannot be run in Firefox (Firefox) (2) solution: modify...