Notes on browser compatibility

W3C

Notes on browser compatibility

Summary of CSS hack writing in IE6, IE7, and Firefox
Image Summary: CSS hack writing in Firefox, IE6, and IE7: (orange represents ff, blue represents IE6, and green represents IE7)
Difference between IE6 and FF:
Background: orange; * Background: blue;
Difference between IE6 and IE7:
Background: Green! Important; Background: blue;
Difference between IE7 and FF:
Background: orange; * Background: green;
Difference ff, IE7, IE6:
Background: orange; * Background: Green! Important; * Background: blue;
Note:
Ie can recognize *, but standard browsers (such as ff) cannot recognize *;
IE6 can recognize *, but cannot recognize it! Important;
IE7 can recognize * and can also recognize! Important;
FF cannot recognize *, but can recognize it! Important;
No matter what method, the order of writing is Firefox's preface, IE7 is in the middle, and IE6 is written at the end.
My browser compatibility practices
Objective: To be compatible with IE6 IE7 Firefox;
When I started to work with our artist on website browser compatibility, I had a clear feeling: We were spoiled by IE before, and it was hard to get involved by luxury, it is not easy to change bad habits
Ah; How can existing systems achieve browser compatibility? In future work, how can we achieve browser compatibility?
At first, I thought about a better solution: I used a search engine to search for various browser-compatible solutions, for example, how to deal with overlapping two layers, how to deal with table support... and then I sorted it out.
One document is shared by the team. This is indeed what I did. From the morning on, there were also "achievements": 40 pages of documents; but before going to bed, I realized this was a piece
"Hardworking and stupid things ".
Cause: the page is correct, regardless of the differences in HTML element rendering by the browser, so the display in all browsers is basically the same; but if the page is wrong, there will be a lot of tricks. For example
The closed tag of the DIV is not written. In Firefox, a page may overlap layers, and another page may show that the layer is at the bottom of the page. In IE, this may be completely
Normal. What is my job? It's not absurd to enumerate all the wrong situations and find a solution.
No matter whether there is an overall idea or whether the problem at hand or what needs to be solved, everything becomes open-minded in the process of solving the problem;
It is the most important page in a system and the most messy page in Firefox: some of the functions are covered, and the left and right divs are mounted one by one. As the page content expands, footer does not automatically move
Next, let's see what we did after two days of fighting? Essentially, we are infinitely close to W3C standards.
As a result, problems can be solved one by one: for existing pages, use W3C verification tools to solve fatal-level errors; how can browser compatibility on pages be ensured in future development ----
You only need to follow W3C standards. Here is a tip, not all browsers fully support all W3C standards, and W3C standards are indeed flawed in some places, so I
They follow W3C standards in general, but do not add W3C statements on the page.
I was tired of making browser compatibility. Later I found a tool. At first, I told her that I didn't expect it to be a great secret (joke )----
Firebug + yslow; http://com3.devnet.re3.yahoo.com/yslow/
The former is an excellent tool for debugging scripts and page styles. You can set breakpoints in scripts. The latter is a tool based on 14 principles mentioned by High Performance Web sites.
:
Yslow analyzes Web pages and tells you why they're slow based on the rules for High Performance Web sites. yslow is a Firefox
Add-on integrated with the popular firebug web development tool.
Some script compatibility problems encountered during browser compatibility:
1. The clipboard cannot be operated in Firefox (is there a curve to save the country ?)
2.event.srcelementin ieis event.tar get in firefox.
3. Div. innertext in IE; Div. textcontent in Firefox;
4. Excessive text is automatically omitted: Style = "overflow: hidden; text-overflow: ellipsis;
Width: 260px; white-space: nowrap; cursor: pointer; "delete W3C standards on the page!
5. If you really need to differentiate different browsers, you can
If (window. Navigator. useragent. indexof ("MSIE")> = 1)
// IE6 7
If (window. Navigator. useragent. indexof ("Firefox")> = 1)
// FF
6. There are also some browser-compatible strategies for CSS.
Don't go beyond the proxy
You can search
Summary:
1.
The W3C standard declaration is followed but not added to the page. This compromise between time and page Quality
2. Beautify existing pages
You can start by verifying W3C
This is a good starting point
3. browser compatibility should be considered during the development of new pages, and the cost after completion is completely different.
Similar to code refactoring
4. Some JavaScript programming should also focus on some sensitive browser compatibility issues
5. one more sentence: It is helpful for page developers to learn a little CSS knowledge to solve browser compatibility problems.
IE and Firefox difference list reply reference
--------------------------------------------------------------------------------
1. When an object is invisible, you cannot set its focus in IE, but in Firefox, you can
2. append rows to a table:
In ff, Safari, opera, and other browsers, use document. createelement to create a row and then use document. appendchild to add the row directly to the table. But not in IE, and
There is no error message. At this time, you need to add the table body (tbody) to the table, and then add the newly created rows to the table body (tbody ),
3. childnodes: Firefox regards the blank space after the carriage return as a text node, While IE is not
4. innertext is the proprietary method of IE, textcontent is the proprietary method of Firefox, and innerhtml is both compatible.
5. Set the Style Class Name of a Node object.
In IE, set the class of a node to "classname" as ATTR to set or get.
Ff and other browsers use "class" as ATTR to set or get.
6. event object. Ie uses window. event, FF uses event
7. Event action object. Ieuses objevent.srcelement, and ffuses objevent.tar get
8. Document. Form. item.
Document. formname. Item ("itemname") in IE ")
Use document. formname. elements ["elementname"] in ff.
9. Use () when using a collection class object, ie can accept, MF cannot. Solution: use [] as the subscript.
10. Window. event cannot be run on ff.
11. Question about the ID of an HTML object as the object name
Existing Problem: in IE, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be in ff.
Solution: Use getelementbyid ("idname") instead of idname as the object variable.
11. The variable name is the same as the ID of an HTML object.
Existing Problem: In ff, the Object ID is not the name of the HTML object, so you can use the same variable name as the HTML Object ID, which cannot be
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 variable name that is the same as the HTML Object ID
Reduce errors
12. event. X and event. Y
Existing Problem: in IE, the event object has the X, Y attributes, and FF attributes.
Solution:
In ff, 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
13. parent node Problems
In ff, parentelement parement. Children is used instead of parentnode. childnodes. Childnodes has different meanings in IE and ff.
With DOM specification, blank text nodes are inserted in childnodes. You can avoid this problem by using node. getelementsbytagname.
14. Const Problems
Existing Problem: you cannot use the const keyword in IE. For example, const constvar = 32; in IE, This Is A syntax error.
Solution: use VaR instead of Const.
15. Body object
FF's body exists before the body tag is fully read by the browser, While IE exists only after the body is fully read.
16. nodename and tagname Problems
Existing Problem: In ff, all nodes have a nodename value, but textnode does not have a tagname value. In IE, nodename usage seems to be faulty.
Solution: Use tagname, but check whether it is empty.
17. Element attributes
The input. Type attribute in IE is read-only, but can be modified in ff.
18. Document. getelementsbyname () and document. All [name] Problems
Existing problems: in IE, getelementsbyname () and document. All [name] cannot be used to obtain DIV elements (whether there are other elements that cannot be retrieved is unknown ).
19. Processing of space characters. According to the HTML standard, the space character is & nbsp ;. In ff, If you mistakenly write & nbsp (with a semicolon missing), it will not be considered as a space by Firefox,
Firefox considers it as & nbsp. In IE, If you mistakenly write & nbsp (with a semicolon missing), ie may think it is a space.
20. process the annotation.
According to the HTML standard, the Comment operation is placed in <! -- And -->, and the annotation cannot contain --; otherwise, an HTML parsing error occurs.