Troubleshoot multiple browser compatibility issues

troubleshoot multiple browser incompatibility issues

First, the browser is not compatible with what.

Browser incompatibility mainly performance of certain functions can not be used, site dislocation, the site some content does not show, web site effects in the browser is not valid, regardless of which is incompatible, will give visitors a very unfriendly experience effect.

Second, what causes the browser is not compatible.

Technical factors. Non-IE kernel browsers are compliant with the standards of the web, and the incompatibility of all browsers will be low if the page code follows the standards of the consortium. This is mainly in the front-end developers, in style writing should pay attention to compatibility issues. Browser factor. Because the browser's kernel is not the same, the current domestic main browser is still mainly ie, so some tags, style itself in the browser is incompatible, such as "margin inconsistent", "div Center problem"

Third, the processing points DOCTYPE affect the CSS processing FF: Set padding, div will increase the height and width, but IE will not, it needs to use!important more set a height and width FF: Support!im Portant, IE is ignored, you can use!important for FF special set style div's vertical center problem: vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not line up in Mozilla Firefox and IE in the box model interpretation of inconsistencies led to a difference of 2px resolution DIV{MARGIN:30PX!IMPORTANT;MARGIN:28PX;
Note that the order of these two margin must not be written in reverse,!important this property ie is not recognized, but other browsers can identify. So in the case of IE, it is interpreted as follows: div{maring:30px;margin:28px} Repeat the definition followed by the last one, so you can not write only margin:xxpx!important

Four, browser differences UL and OL list indentation problem elimination of UL, OL and other lists of indentation, style should be written: list-style:none;margin:0px;padding:0px; the margin attribute is effective for IE, The Padding property is valid for Firefox. [Note experience, in IE, the set margin:0px can remove the list of the top and bottom indent, blank and list number or dot, set padding has no effect on the style; in Firefox, setting margin:0px can only remove up and down whitespace, setting padding : 0px can only remove the left and right indentation, you must also set List-style:none
Can remove list numbers or dots. In other words, in IE only set margin:0px can achieve the final effect, and in Firefox must be set up margin:0px,
padding:0px and List-style:none three items to achieve the ultimate effect. CSS Transparency Issues IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60). ff:opacity:0.6. [Note that the best two are written, and the opacity attribute is placed below.) CSS fillet problem ie:ie7 The following versions do not support rounded corners. FF:-MOZ-BORDER-RADIUS:4PX, or-moz-border-radius-topleft:4px ';-moz-border-radius-topright:4px ';- Moz-border-radius-bottomleft:4px ';-moz-border-radius-bottomright:4px; [Fillet problem is a classic problem in CSS, it is recommended to use the jquery framework set to set rounded corners, so that these complex problems to others to think about it. But the rounded corners of jquery only see the rounded corners that support the entire area, but the rounded corners of the border can be achieved by some simple means, the next time you have an opportunity to introduce them. ] Cursor:hand VS cursor:pointer problem Description: Firefox does not support hand, but IE supports pointer, both are hand-shaped instructions. Workaround: Unify the use of pointer. Font size definition different to the font size small definition, Firefox 13px, and IE 16px, the difference is quite large. WORKAROUND: Use the specified font size, such as 14px. A number of elements (pictures or links) between the Div and Div, the code in the space and carriage return in Firefox will be ignored, and IE in the default display of space (about 3px). CSS double-line concave-convex border ie:border:2px outset; Ff:-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors: #404040 # 808080;-moz-border-bottom-colors: #404040 #808080, browser bug1, ie bilateral distance bug set to float div in IE set the margin will double. This is a bug that IE6 all exist.

V. Solutions different browser labels default external patches and internal patches are different
Problem symptom: Casually write a few label, do not add style control circumstance, respective margin and padding difference is big.
Hit frequency: 100%
Solution: *{margin:0;padding:0 in CSS
Note: This is the most common and easiest to solve a browser compatibility problem, almost all the beginning of the CSS file with wildcard * To set the internal and external patch of each label is 0. Block property tags float, and there are rampant margin cases in the IE6 display margin than the setting of the large

Problem symptom: Casually write a few label, do not add style control circumstance, respective margin and padding difference is big. Hit frequency: 100% solution: CSS
{margin:0;padding:0;} Note: This is the most common and easiest to solve a browser compatibility problem, almost all the CSS file at the beginning of the use of wildcard characters to set the internal and external patch is 0.

Set a small height label (generally less than 10px), in Ie6,ie7, roaming height beyond their set height problem symptoms: IE6, 7 and roaming in the height of the label is not controlled, more than the height of their settings hit frequency: 60%
Solution: Set the Overflow:hidden for a label that is out of height, or set the row height line-height less than the height you set.
Note: This situation usually occurs in the label where we set the small rounded background. This problem occurs because the IE8 browser will give the label a minimum default row height. Even if your label is empty, the height of the label will reach the default row height.
Inline Property labels, set Display:block with float layout, and run rampant margin, IE6 spacing bug problem symptom: IE6 spacing is more likely than set spacing: 20%
Solution: in Display: Block; add display:inline;display:table to the back;
Note: Inline property labels, in order to set the width of the height, we need to set Display:block (except the input tag is more special). After using the float layout and having the transverse margin, under IE6, he has the horizontal margin bug after the Block property float. But because it itself is the inline attribute tag, so we add display:inline, its width is not set. At this time we also need to add display:talbe behind the display:inline.
Picture default spacing problem symptom: When several IMG tags are put together, some browsers will have the default spacing, plus the wildcard character mentioned in the question is not working. Odds: 20%
Solution: Use the Float property for img Layout
Note: Because an IMG tag is an inline property tag, the IMG tag is lined up in one row, but there is a space between the IMG tags in some browsers. Remove this spacing using float is the right path. (One of my students use negative margin, although it can be solved, but negative margin itself is easy to cause browser compatibility problem usage, so I forbid them to use)
Label minimum height setting min-height incompatible Problem symptom: Because Min-height itself is an incompatible CSS property, so setting min-height is not very good to be compatible with each browser chance: 5%
Solution: If we want to set a label of the minimum height of 200px, you need to set the

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

Note: In the B/s system front-end, there are many circumstances we have this demand. When the content is less than a value (such as 300px). The height of the container is 300px, and when the content height is greater than this value, the container height is propped up rather than the scroll bar. This is when we face this compatibility problem.

Compatible CSS settings for transparency
The way to do a compatible page is: Each write a small piece of code (layout of a line or a piece) we have to see in different browsers are compatible, of course, skilled to a certain degree is not so troublesome. It is recommended that you frequently encounter compatibility issues with novice users. Many of the compatibility issues are due to the fact that the browser is different from the default property resolution of the label, so long as we can easily resolve these compatibility issues with a little setup. If we are familiar with the default properties of tags, we can understand why compatibility issues arise and how to solve them.

Attachment: Determine the type of browser:

var ua = Navigator.userAgent.toLowerCase (); var os = new Object ();
Os.isfirefox = Ua.indexof ("Gecko")!=-1; Os.isopera = Ua.indexof
("opera")!=-1; Os.isie =!os.isopera && ua.indexof ("MSIE")!=-1;