7 JavaScript differences between Firefox and IE, Firefox javascript

7 JavaScript differences between Firefox and IE, Firefox javascript

Although the history of using lengthy and annoying code blocks in JavaScript to mark specific browsers has ended, however, it is necessary to occasionally use some simple code blocks and object detection to ensure that some code works normally on the user's machine.

In this article, I will outline seven different aspects of Internet Explorer and Firefox in JavaScript syntax.

1. CSS "float" attributes

The basic syntax for getting a specific CSS attribute of a given object is the object. style attribute, and the attributes with hyphens must be replaced by the camel naming method. For example, to obtain the background-color attribute of a div whose ID is "header", we need to use the following syntax:

 

Document. getElementById ("header"). style. borderBottom = "1px solid # ccc ";

However, because "float" is a reserved word in JavaScript, we cannot use object. style. float to obtain the "float" attribute. Here is how we use these two browsers:

IE Syntax:

 

Document. getElementById ("header"). style. styleFloat = "left ";

Firefox Syntax:

 

Document. getElementById ("header" ).style.css Float = "left ";

2. Calculation style of Elements

By using the above object. style. property, JavaScript can easily obtain and modify the CSS style of an object. However, the limitation of this syntax is that it can only get the inline style in HTML, or directly use the style set by JavaScript. The style object cannot obtain the styles set using the external style table. To obtain the "calculation style" of an object, use the following code:

IE Syntax:

 

Var myObject = document. getElementById ("header "); Var myStyle = myObject. currentStyle. backgroundColor;

Firefox Syntax:

 

Var myObject = document. getElementById ("header "); Var myComputedStyle = document. defaultView. getComputedStyle (myObject, null ); Var myStyle = myComputedStyle. backgroundColor;

3. Obtain the "class" attribute of an element.

Similar to the "float" attribute, the two browsers use different JavaScript methods to obtain this attribute.

IE Syntax:

 

Var myObject = document. getElementById ("header "); Var myAttribute = myObject. getAttribute ("className ");

Firefox Syntax:

 

Var myObject = document. getElementById ("header "); Var myAttribute = myObject. getAttribute ("class ");

4. Obtain the "for" attribute of the label.

Like 3, using JavaScript to obtain the "for" attribute of a label also has different syntaxes.

IE Syntax:

 

Var myObject = document. getElementById ("myLabel "); Var myAttribute = myObject. getAttribute ("htmlFor ");

Firefox Syntax:

 

Var myObject = document. getElementById ("myLabel "); Var myAttribute = myObject. getAttribute ("");

The same syntax is used for the setAtrribute method.

5. Obtain the cursor position

It is rare to obtain the cursor position of an element. If you need to do so, the syntax of IE and Firefox is different. This sample code is quite basic and is generally used as part of processing many complex events. Here it is only used to describe the differences. It should be noted that the results in IE are different from those in Firefox, so this method has some problems. In general, this difference can be compensated by obtaining a "rolling position"-but it is another article.

IE Syntax:

 

Var myCursorPosition = [0, 0]; MyCursorPosition [0] = event. clientX; MyCursorPosition [1] = event. clientY;

Firefox Syntax:

 

Var myCursorPosition = [0, 0]; MyCursorPosition [0] = event. pageX; MyCursorPosition [1] = event. pageY;

6. Obtain the size of the window or browser window

Sometimes you need to find out the size of the valid window space of the browser, which is generally "window ".

IE Syntax:

 

Var myBrowserSize = [0, 0]; MyBrowserSize [0] = document.doc umentElement. clientWidth; MyBrowserSize [1] = document.doc umentElement. clientHeight;

Firefox Syntax:

 

Var myBrowserSize = [0, 0]; MyBrowserSize [0] = window. innerWidth; MyBrowserSize [1] = window. innerHeight;

7. Alpha transparency

Well, this is not actually a JavaScript syntax project-alpha transparency is set through CSS. However, when the object is set to fade in and out through JavaScript, it needs to be implemented by obtaining the alpha setting of CSS, which is generally within the loop. Use the following JavaScript to change the CSS code:

IE Syntax:

 

# MyElement { Filter: alpha (opacity = 50 ); }

Firefox Syntax:

 

# MyElement { Opacity: 0.5; }

To obtain these values using JavaScript, you need to use the style object:

IE Syntax:

 

Var myObject = document. getElementById ("myElement "); MyObject. style. filter = "alpha (opacity = 80 )";

Firefox Syntax:

 

Var myObject = document. getElementById ("myElement "); MyObject. style. opacity = "0.5 ";

Of course, we have already mentioned that it is generally used to change opcity/alpha in the middle of a loop to create an animation effect. But this is a simple example, to clearly describe how the method is implemented.

Original article: http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie

The difference between ie and Firefox is that javascript is compatible with Firefox and ie6ie7 and ie8.
What are the differences between firefox ie css and css hack?
The next two methods can solve almost all today's HACK.

1 ,! Important

With IE7! Important Support ,! The important method is only for IE6HACK. (note the writing method. Remember that the declaration position must be in advance .)
<Style>
# Wrapper
{
Width: 100px! Important;/* IE7 + FF */
Width: 80px;/* IE6 */
}
</Style>

2, IE6/IE77 for FireFox

* + Html and * html IE-specific tags, which are currently supported by firefox. * + html and IE7-specific tags.
<Style>
# Wrapper
{
# Wrapper {width: 120px;}/* FireFox */
* Html # wrapper {width: 80px;}/* ie6 fixed */
* + Html # wrapper {width: 60px;}/* ie7 fixed, pay attention to the Order */
}
</Style>

Note:
* + For IE7HACK, the html header must have the following declaration:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
2. Universal float Closure

For details about the principle of clear float, refer To [How To Clear Floats Without Structural Markup]
Add Global CSS to the code below and add class = "clearfix" to the closed div.
<Style>
/* 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 */
</Style>
Iii. Compatibility skills

1. Setting padding for div under FF will increase the width and height, and IE will. (use! Important solution)
2. ranking problems.
1). Set the same height of the current div in vertical. line-height, and use vertical-align: middle. (Note that the content should be wrapped .)
2). Horizontal ranking. margin: 0 auto; (when omnipotent)
3. To add a style to the content of tag a, set display: block)
4. The difference between FF and IE in understanding the BOX may lead to a 2px difference, as well as the problem of setting margin doubling under floatdivie.
5. By default, the ul tag FF contains list-style and padding. You must declare them in advance to avoid any trouble. (This is common in navigation tags and content lists)
6. Set the height of the external wrapper div, and add overflow: hidden. To achieve high adaptability.
7. about hand-shaped cursor. cursor: pointer. And hand only applies to IE.

1 For firefox ie6 ie7css
Most of them are used now! Important to hack for ie6 and firefox Testing Normal display
Ie7 pairs! The correct description of important will result in the page not displaying the needle as required
Incorrect Internet Explorer 7. Use * + html to browse Internet Explorer 7.
CSS sample:

#1 {color: #333;}/* Moz */
* Html #1 {color: #666;}/* IE6 */
* + Html #1 {color: #999;}/* IE7 */
Font Color Display in firefox # font color display in 333IE6 # font color display in 666IE7 #999

2. css layout
The main style definition is as follows:

Body {TEXT-ALIGN: center ;}
# Center {MARGIN-RIGHT: auto; MARGIN-LEFT: auto ;}
Note:
First, the parent-level element defines TEXT-ALIGN: center, meaning that the content in the parent-level element is in place. For the IE sample
Mozilla can add MARGIN-RIGHT: auto; MARGIN-LEFT: auto when defining sub-elements;
It should be noted that you want to use the method to make the whole page to live. It is recommended to split multiple divs from the DIV in sequence.
You only need to define MARGIN-RIGHT: auto; MARGIN-LEFT: auto; in each split div.

Three boxes of Models

# Box {width: 600px; // for ie6.0-w \ idth: 500px; // for ff + ie6.0}
# Box {width: 600px! Important // for ff width: 600px; // for ff + ie6.0 width/**/: 500px; // for ie6.0 -}

4 floating ie generates double distance

# Box {float: left; width: 100px; margin: 0 0 0 100px; // in other cases, IE will generate PX distance display: inline; // ignore floating}
Let's take a closer look at the block and inline elements. Features of the Block element: starting from a new row, height, width, line height, and margin (block Element); features of the Inline element: traveling with its elements ,... control (embedded element );

# Box {display: block; // The embedded element simulates the block element display: inline; // achieves the same row arrangement effect. diplay: table;

IE recognizes min-definition. In fact, the normal width and height are treated as min, which makes the case that only width and height are used.
In a normal browser, only min-width and min-heightIE values are used.
The problem solving is more important than setting the background image width:
# Box {width: 80px; height: 35px;} html> body # box {width: auto; height: auto; min-width: 80px; min-height: 35px ;}

6. Small page width

Min-width is very convenient for CSS commands to specify small elements or smaller width samples, which can ensure correct layout and IE Recognition
In fact, the width is used as a small width so that the command IE can also use the <div> put <body> tag div to specify the class:
CSS sample design:
# Container {min-width: 600px; width: expression (document. body. clientWidth <600? "600px": "auto ");}
The min-width is normal; the width of line 2nd uses Javascript, and only IE recognizes it. This also makes HTML documents too formal. In fact, small width can be achieved through Javascript judgment.

7. Clear floating

. Hackbox {display: table; // The object is displayed as a block element-Level table} Or. hackbox {clear: both ;}
Or add: after (pseudo object), set the content of the object. Usually, use IE with content to support this pseudo object not supported by Ie browsers.
The inconvenience caused by IE/WIN browsers ...... # box: after {content :". "; display: block; height: 0; clear: both; visibility: hidden ;}

8 DIV floating IE text generation 3 pixel bug

The left margin of the outer patch is used on the right side of the floating object to locate the object text on the right, which is 3 px away from the left.

# Box {float: left; width: 800px; }# left {float: left; width: 50% ;}# right {width: 50% ;} * html # left {margin-right:-3px; // sentence key}
HTML code <div id = "box"> <div id = "left"> </div> <div id = "right"> </div>

9 attribute selector (compatible with computing and hiding CSS bugs)

P [id] {} div [id] {}
It is hidden in IE6.0 and IE6.0 versions, and uses FF and OPera.
There is a difference between the property selector and the Child selector. The range of the Child selector is reduced in form. The range of the property selector is large. p [id], and all p tags have the same id.

10 Internet Explorer

When the div application is complicated, there are some links in each column, such as Divs, which are prone to hide-and-seek problems.
Some content is displayed. When you select a region, the page is displayed.
Solution: Use the line-height attribute for # layout or use the fixed height and wide Page Structure for # layout as simple as possible.

11 high adaptability

Height adaptation when the height of the inner layer object changes, the outer layer height can be automatically adjusted, especially when the inner layer object is used
When margin or paddign is used
Example:
<Div id = "box">
<P> p object content </p>
</Div>
CSS: # box {background-color: # eee ;}
# Box p {margin-top: 20px; margin-bottom: 20px; text-align: center ;}
Solution: Add 2 empty div objects to the upper and lower sides of the P object. CSS code:. 1 {height: 0px; overflow: hidden;} or add the border attribute to the DIV.

Vi. CSS compatibility Key Points Analysis IE vs FF

Key Points of CSS compatibility:

DOCTYPE affects CSS Processing

FF: When div is set to margin-left and margin-right auto, it is already in use and IE is in the row.

FF: when setting text-align for the body, set the margin: auto (mainly margin-left, margin-right) square for the div.

FF: When padding is set, the div will increase the height and width, and IE will, so we need to use it! Important multiple settings of height and width

FF: Yes! Important, IE is ignored, use! Important FF special settings

Div vertical ranking problem: vertical-align: middle; line spacing increase and the entire DIV line-height: 200px; insert text vertical ranking disadvantages to control content to wrap

Cursor: pointer at the same time, ie ff displays cursor finger-like hand only IE

FF: You need to set display: block for adding borders and background colors to the link, and set float: left to ensure that the line feed references menubar. Setting height for a and menubar avoids misplacement of the bottom side. If you set height, menubar insert Space XHTML + CSS compatibility solution small set

The use of XHTML + CSS architecture has fewer advantages and some problems. Due to proficiency in usage and clear thinking, I will first write down some problems that I have encountered below to help you find ^

1. The mozilla firefox and IEBOX models cause a 2px difference. solution:

Div {margin: 30px! Important; margin: 28px ;}

Note that the order of the two margin statements can be reversed! The important attribute IE can identify other browsers. The IE attribute is actually interpreted as follows:

Div {maring: 30px; margin: 28px}

Repeat the definition to execute the write-only margin: XXpx! Important;

2. IE5 and IE6BOX explanations: div {width: 300px; margin: 0 10px 0 10px;} div width is interpreted as 300px-10px (right filling)-10px (left filling) the final div width is 280px, while IE6 and its browser width is 300px + 10px (right fill) + 10px (left fill) = 320px. We will modify it for calculation.

Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}

For more information about/**/I only know that both IE5 and firefox support IE6. If anyone understands this, please let me know :)

3. the ul tag Mozilla has a padding value by default, While IE is defined only when margin has a value.

Ul {margin: 0; padding: 0 ;}

Can solve most problems

4. For script xhtml1.1 to support the language attribute, you only need to change the code

<Type = "text/java">

Now
7. 10 may not know CSS skills

1. Simplified CSS font attributes

Set the font attributes using CSS as follows:

Font-weight: bold;

Font-style: italic;

Font-varient: small-caps;

Font-size: 1em;

Line-height: 1.5em;

Font-family: verdana, sans-serif;

Also write all the rows:

Font: bold italic small-caps 1em/1.5em verdana, sans-serif;

True or false: only a note should be reminded: the abbreviated method works only when the font-size and font-family attributes are specified at the same time, and font-weight, font-style, and font-varient will use the default value to note

2. Use both

Class can only be set for the element, which means two actual examples can be used:

<P class = "text side">... </p>

At the same time, the P element and the other two types will be opened with a blank space. All the text and side attributes will be added with the P element. The two types of attributes have conflicting settings. That is, the CSS file's face-to-face attributes work.

Supplement: The ID can be written as <p id = "text side">... </p> or as a sample.

3. Default Value of CSS border

The border color width and style are usually set:

Border: 3px solid #000

Bit to display the boundary as a 3-pixel black solid line. In fact, you only need to specify the style

If only the style is specified, the default Border width is equal to 34 pixels by default, and the default color is the same as the text color value.

4. CSS for document printing

Many websites use CSS to set the print style for the printed version.

In other words, two CSS files are specified on the page for screen display and printing:

<Link type = "text/css" rel = "stylesheet" href = "/blog/stylesheet.css" media = "screen"/> <link type = "text/css" rel = "stylesheet" href = "printstyle.css" media = "print"/>

1st rows show 2nd rows print note its media attributes

We should print CSS to write things. We should set the design according to the general CSS method of design, and set CSS to display CSS to check the effect. We may use display: none command to turn off some decorative images and then turn off some navigation buttons to learn more about the differences

5. Image replacement skills

Generally, we recommend that you use standard HTML to display text, and use images faster and more readable. You can only use images when you want to use some special fonts.

IMG uses images for selling items:

<H1>
For search engines, there is almost no interest in replacing text in alt compared to normal text. Because many designers put many keywords to cheat the search engine, the method should be as follows:

<H1> Buy widgets
There is no special font to design CSS for the same effect:

H1 {background: url (/blog/widget-image.gif) no-repeat; height: image height text-indent:-2000px}

Note: If you change the image height to the true image height, the image will be displayed as the background, and the real text will be displayed at on the left of the screen due to the-2000 pixel indent setting. For the person who closes the image be aware of all the points

6. Another adjustment technique for the CSS box Model

The Box model adjustment is mainly aimed at comparing the Border Width and blank space of IE 6 with the element width:

# Box {width: 100px; border: 5px; padding: 20px}

Sample call:

<Div id = "box">... </div>

When the Box width should be 150 points, except for IE6 before IE browser, all browsers are correct. IE5, the browser width is still 100 points. The Box adjustment method was invented by the predecessors to deal with the difference.

Use CSS to achieve the same purpose, so that we can display the effect

# Box {width: 150px} # box div {border: 5px; padding: 20px}

Sample call:

<Div id = "box"> <div>... </div>

The browser width of sample manager is 150 points.

7. Block Element ranking alignment

To make a fixed-width webpage and to make the webpage horizontally look like this:

# Content {width: 700px; margin: 0 auto}

<Div id = "content"> is used to enclose all elements, which is simple enough. Versions earlier than IE6 will show the effect change CSS:

Body {text-align: center }# content {text-align: left; width: 700px; margin: 0 auto}

The Content of the webpage is added to the Content.

Text-align: left

8. Use CSS to process Vertical Alignment

Vertical Alignment: using tables to easily set table units vertical-align: middle is useless for CSS. If you want to set a navigation bar 2em high, it is useless to set the vertical attribute of navigation text.

The CSS method is correct. Set the text line height to 2em: line-height: 2em.

9. CSS container Positioning

The advantage of CSS is that the elements can be located in the container at will and compared to the container:

# Container {position: relative}

All elements in the sample container are relative to the positioning sample:

<Div id = "container"> <div id = "navigation">... </div>

To locate the above 5 points from the left 30: 00: 00: 00: 00: 00: 00: 00:

# Navigation {position: absolute; left: 30px; top: 5px}

For example:

Margin: 5px 0 0 30px

Note 4: Top, right, bottom, and left are better positioned while the margin method is better.

10. Background color at the bottom of the straight-through screen

To control the CSS in the vertical direction, you can make the navigation bar and content bar pass through the bottom of the page and use the form to easily use the sample CSS:

# Navigation {background: blue; width: 150px}

The shorter navigation bar will go straight to the bottom half of the content and it will end at the end. What should I do?

Fortunately, we can only use spoofing to add the background image width and column width to the shorter column, and set the color and background color.

Body {background: url (/blog/blue-image.gif) 0 0 repeat-y}

In this case, you can use em as the unit. Because the reader changes the font size, the trick will show that only px can be used.