Processing distal browser compatibility

Browser on the market, many different types, different browser kernel are not the same, so each browser parses the web page there are some differences. Browser kernel is divided into two, one rendering engine, and the other is js engine, more inclined to say that the core rendering engine.

Common browser kernel can be divided into four kinds: Trident, Gecko, Blink, Webkit

IE browser: Trident kernel, also known as the IE core
Chrome browser: Webkit kernel, the kernel now Blink
Firefox browser: Gecko core, commonly known as the kernel Firefox
Safari browser: Webkit kernel
Opera browser: originally own Presto kernel, Google later joined the army, went to Blink from Webkit kernel;
Browser 360: IE + Chrome dual-core
Cheetah Browser: IE + Chrome dual-core
Baidu browser: IE kernel
QQ browser: Trident (compatibility mode) + Webkit (high-speed mode)

Browser compatibility issues or compatibility is also known as web site compatibility issues, refer to page on various browsers display may produce inconsistent compatibility problems between the browser and Web pages. In the design and production website, good browser compatibility, you can make your site appear correctly in different browsers. As for the browser software development and design, better browser compatibility standards can better experience to the user.

　　Problems began formal introduction:

1. different browser tabs default outer patch (margin) and within the patch (padding) different

Solution: css increase in wildcard * {margin: 0; padding: 0}

2.IE6 from bilateral issues; set float in IE6, but also set the margin, the margin will be a problem

Solution: Set display: inline;

3. When setting the height of the label below 10px, in IE6, IE7 will exceed the height of the set up their own

Solution: exceed the height of the label set overflow: hidden, or set the value of line-height less than the height of your settings

4. Default Picture a distance

Solution: Use float for the layout img

5.IE9 following browsers can not use opacity

Solution: opacity: 0.5; filter: alfha (opacity = 50); filter: progid: DXlmageTransform.Microsoft.Alfha (style = 0, opacity = 50);

6. overlap margin; when two adjacent elements are provided with margin margin, margin will take the maximum, minimum discarded;

7.cursor: hand hand display type is not supported on safari

Solution: unified use cursor: pointer

8. The two block-level elements, the parent element is provided overflow: auto; child element set position: relative; and a height greater than the parent element will be hidden in IE6, IE7 not overflow;

Solution: A parent element is set to position: relative

9.const problem

Note: In Firefox, you may be used to define the constant const keyword; under IE, only use var keyword to define constants.
Solution: unified use var keyword to define constants.

10.event.srcElement problem

Problem description: the IE, event srcElement object has attributes, but there is no target attribute; under Firefox, event objects have the target property, but no srcElement properties.
Workaround: Use srcObj = event.srcElement event.srcElement:? Event.target;

11. Event binding

IE: dom.attachEvent ();
other browsers: dom.addEventListener ();
standard browser using event capture mode corresponding to the IE bubbling of events (i.e., the standard by the outermost to the innermost element or elements IE elements from the innermost to the outermost element) final standard side also think IE is reasonable in this area, so they put event bubbling into the standard, which is also the origin of the third parameter of addEventListener and event bubbling as the default.

12. The operation of tr html

Ie9 In the following, the inoperable innerHTML tr

13.ajax slightly different

IE: ActiveXObject
Other: xmlHttpReuest

14. The target width and height assignment problem

Problem Description: FireFox similar obj.style.height = invalid imgObj.height statement.

CSS

1. cursor:hand VS cursor:pointer

firefox does not support the hand, but ie support pointer
Solution: unified use of pointer

2. innerText can work in IE, but not in the FireFox.

需用textContent。
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

3. CSS transparent

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。

4. css in width and padding

IE7 in width in width and does not include the FF padding, padding including in the Ie6.

5. FF and IEBOX model explains the phase difference due to inconsistent 2px

{width box.style: 100; border1px;}
IE = 100 understood to box.width
FF understood to box.width = 100 + 1 * 2 = 102 // Include border 2px

Solution: div {margin: 30px important; margin:! 28px;}
Note that both the margin must not be written sequentially trans, IE Important not recognize this attribute, but other browsers may identify!. In fact, it is interpreted as this IE: div {maring: 30px; margin : 28px}
repeat the words defined last performed in accordance with, so not just write margin:! XXpx important;

6. IE5 and IE6's interpretation is inconsistent BOX

Under IE5 div {width: 300px; margin : 0 10px 0 10px;}
width div will be interpreted as 300px-10px (right padding) -10px (filled left), the final width of 280px div, and other browsing in IE6 it is based on the width 300px + 10px (right padding) + 10px (left padding) = 320px calculated. Then we can make the following modifications div {width:! 300px important; width / ** /: 340px; margin: 0 10px 0 10px}

7. ul and ol lists indentation problem

When eliminating the indented list of ul, ol, etc., should be written style: list-style: none; margin : 0px; padding: 0px;
proven in IE, setting margin: 0px can remove up and down the list of indentation, blank and a list of numbers or dots, no padding set style influence; in Firefox, setting margin: 0px can remove only the blank up and down, setting padding: 0px can only be removed after about indentation, you must also set list- style: none to remove the list numbers or dots. In other words, only in IE setting margin: 0px the final result can be achieved, while at the same time must be set in Firefox margin: 0px, padding: 0px and list-style: none three in order to achieve the final result.

8. The element is centered horizontally problem

FF: margin:0auto;

IE: Parent {text-align: center;}

9. Div centered vertically problem

vertical-align: middle; and across the line spacing increased as high DIV: line-height: 200px; text is then inserted, on a vertical center. The disadvantage is not content to control the line breaks.

10. margin doubled problem

Set margin float the div settings in ie will double. This is a ie6 there is a bug. The solution is in the div inside with display: inline;

E.g:

<divid = "imfloat">
corresponding to css
# {imfloat
a float: left;
margin: 5px; 10px understood as the // IE
the display: inline; then understood to be the // IE 5px}

11. IE problems with height and width

IE min- not recognize this definition, but it is actually the width and height as the normal case have to make min. Such big problem, if only the width and height, normal browser will not become two values, only if the min-width and min-height, then, IE below did not set equal to the width and height.

For example, to set the background image, the width is more important. To solve this problem, it can be:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}

12. The minimum width of the page

As a problem, IE does not recognize min, to achieve the minimum width, the following methods are available:

#container{ min-width: 600px;width:expression(document.body.clientWidth＜ 600? "600px": "auto" );}

The first min-width is normal; but the width of the second line uses Javascript, which only IE only recognize, it also makes your HTML document less formal. It is actually achieved by determining the minimum width of Javascript.

13. DIV floating IE 3 pixels generated text bug

Floating objects left and right using the left margin of the outer patch positioned within the text objects from the left to the right a distance of 3px.

#box{ float:left; width:800px;} 
#left{ float:left; width:50%;} 
#right{ width:50%;} 
* Html #left {margin-right: -3px; //} is the key phrase 
<div id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>

14. IE hide and seek problems

When the application of complex issues div when there are links to each bar, DIV and other vulnerable this time of hide and seek.

Some of the content does not show up when the mouse to select the region is indeed found in the page content.

Solution: Use the line-height attribute to #layout #layout or fixed high and wide. Page structure as simple as possible.

15. float closing of div; Clear float; highly adaptive

① For example: <div id = "floatA"> <div id = "floatB"> <div id = "NOTfloatC">

NOTfloatC here we do not want to continue the translation, but hope down the row. (Wherein floatA, floatB attribute has been set to float: left;)

This code no problem in IE, the problem in FF. The reason is NOTfloatC not float the label, the label must float closed. Between <divclass = "floatB"> <div class = "NOTfloatC"> plus <div class = "clear"> this div must pay attention to the position, and must have the same level with the two float div properties between nesting relationship can not exist, or will cause an exception. And clear as this style is defined as follows to: .clear {clear: both;}

As the external wrapper div ② Do not surely die height, in order to be able to make highly adaptive, to add overflow inside the wrapper: hidden; when the containing box float, highly adaptive invalid In IE, this time should trigger the IE layout private attributes (IE evil ah!) with a zoom: 1; can be done, so that to achieve compatibility.
For example, a definition of a wrapper as follows:

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

③ for typesetting, we mostly use css description probably float:. Left sometimes we need to do a uniform background behind the float div n columns, such as:

</div>

For example, we want to set the page background blue, in order to achieve all three columns background color is blue purpose, but we found that with the left centerright down the stretch, while the page is actually saved the same height, the question is , because the page is not float property, and our page due to the center, it can not be set to float, so we should be resolved:

</div>

And a re-embedding float left width DIV 100% solution.

④ universal float closed (very important!)

On clear float principle can be found in [How To ClearFloats Without Structural Markup], the following code is added Global CSS, the need to add a closed div class = "clearfix" can be, tested.

/* 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 */

Or arranged such: .hackbox {display: table; // display object as a table level block elements}

16. highly suited

The outer layer is highly suited height adjustment can not be performed automatically when the inner height of the object is changed, particularly when the inner object using the time margin or padding.

Example:

#box {background-color:#eee; } 
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 
<div id="box">
<P> p object content </ p>
</div>

Solving techniques: each plus 2 empty div CSS code objects P in the object vertically {height: 0px; overflow: hidden;} or a DIV plus border property.

The picture has the voids 17. IE6

BUG fix this there are many skills, can change the layout of html, img or set to display: block or set vertical-align property vertical-align: top / bottom / middle / text-bottom can be resolved.

18. The text input box align text

Plus vertical-align: middle;

input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}

</style>

Proven, do not apply in any version under IE, and ff, opera, safari, chrome are OK!

19. LI exceeds the length of the display contents ellipsis

This technique applies to IE, Opera, safari, chrom browser, FF does not support.

20. Why web standards IE can not set the scroll bar color

The solution is to replace the body html

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">

html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
＜/style>

21. Why is the height of the container can not be defined around 1px

Under IE6 problem is caused because the default line height, and there are many techniques to solve:

例如:overflow:hidden　 zoom:0.08 　line-height:1px

22. Links (a label) border and background

a link to add borders and background colors, set the display: block, and set float: left to ensure that no line breaks. Referring menubar, menubar, and provided to a high degree in order to avoid dislocation of the bottom edge of the display, if provided height, can be inserted in a space in the menubar.

23. After the hyperlink is not accessible hover styles emerging issues

Clicked visited Hyperlink style does not have hover and active, and a lot of people should have encountered this problem solving skills is to change the order of CSS properties: LVHA

Code:

a:link {}
a:visited {}
a:hover {}
a:active {}

</style>

24. FORM tag

The tag in IE will automatically margin of some margin, but in FF the margin is 0, so if you want to display the same, so it is best to specify in the css margin and padding for the above two issues, my css first, generally use such an embodiment ul, form {margin: 0; padding: 0;}.

25. attribute selectors (this can not be considered compatible, is hidden in a bug css)

p[id]{}div[id]{}

For this version of the following IE6.0 and IE6.0 are hidden, FF and OPera role attribute selectors and child selectors still have differences, child selectors range from reduced form, the scope attribute selectors relatively large as p [id], the p tags all have the same type are id.

26. Why can not text-FF distraction height of the container

Fixed height value of standard browsers like IE6 container is not going to be in that kind of distraction, then I want a fixed height, want to be softened need how to set it? Approach is to remove the set height min-height: 200px; herein can be defined to take care not to recognize IE6 min-height of:

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

27. how to get on top of layer display it FLASH

The solution is to set up a transparent FLASH

<paramname="wmode" value="transparent" />