1. different browser tabs by default outer and inner patch patches margin padding different
The probability of occurrence: 100%
Solution: Use CSS wildcard *, inside and outside the patch set to 0
*{ margin: 0; padding: 0;}
2. After block attribute tag float, but also the lateral margin value, the display (from bilateral IE6 bug) greater than set in IE6
The probability of occurrence: 90%
Solution: Add display in float Label Style Control: inline;
3. Set a smaller height label (generally less than 10px), set in their height beyond IE6, IE7, travel in
The probability of occurrence: 60%
Solution: Settings tab to exceed the height of overflow: hidden; set the row height, or line-height less than the height you set.
4. Set the tag line display: block; float then uses the layout, and then set the lateral margin value, will show in IE6 (from bilateral IE6 bug) larger than the set
The probability of occurrence: 20%
Solution: display: block; followed by display: inline; display: table;
5. Image has default spacing
The probability of occurrence: 20%
Solution: Use float for the layout img
6. The minimum height of the label set is not compatible min-height
Occurrence probability: 5%
Solution: For example, to set up a label of a minimum height of 200px
{ min-height: 200px;
height: auto!important;
height: 200px;
overflow: visible;}
7. Transparency compatibility settings
The probability of occurrence: mainly to see you write something set no transparency
Solution: word
transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
opacity:0.5; This is the “most important” one because it is the currentstandard in CSS. This will work in most versions of Firefox, Safari, andOpera.This would be all you need if all browsers supported current standards. Which,of course, they don’t.
filter:alpha(opacity=50); This one you need for IE.
-moz-opacity:0.5; You need this one to support way old school versions of theMozilla browsers like Netscape Navigator.
-khtml-opacity:0.5; This is for way old versions of Safari (1.x) when therendering engine it was using was still referred to as KTHML, asopposed to thecurrent WebKit .
8. Box Model of bug
Description: to set an element height and width at the same time, also to set the margin and padding values, will change the actual size of the element.
The solution: add a div inside div need to increase the margin and padding, margin and padding set values in the div.
The list li staircase 9. IE6 bug
Description: li element is usually (for example, a) providing a float float, but itself does not float li.
Solution:
ul li{float:left;}
或 ul li{display:inline;}
10.li white space
Description: In IE, will increase the vertical spacing between the li and li
The solution: add an explicit width or height to inside a li
li a{width:20px;}
or
li a{display:block;float:left;clear:left;}
or
li {display:inline;}
li a{display:block;}
or
Provided a solid line on the bottom of each list li, li color and background color of the same
11.overflow: auto; and position: relative collision
Description: This bug occurs only IE6 and IE7, two block-level element, the parent element is provided overflow: auto; child element set position: relative; and a height greater than the parent element, the element is not in the neutron IE6-7 but hidden overflow.
Solution: Give the parent element also set position: relative;
12. The floating layer misalignment
Description: When the content exceeds the width of the outer container defined by a floating layer will cause misalignment problems. In Firefox, IE7, IE8 and other standard browsers, beyond the content just beyond the edge; but in IE6 container will ignore the value of defined width, width incorrectly with the content width growth and growth. If, after the floating element also followed by a floating element, then it will lead to dislocation problem.
Solution: overflow: hidden;
Cloning text bug 13.IE6
Description: If your code is structured as follows
<! - This is a comment ->
<div>
……
</div>
<! - This is a comment ->
It is likely to appear in text on a blank page IE6
solution:
Use conditional comments
Delete all comments
In the previous comments that the floating elements plus display: inline;
14.IE pictures zoom
Description: scale the image in IE sometimes affect their quality
Solution: img {-mg-interpolation-mode: bicubic;}
Under 15.IE6 png images of transparent bug
Description: transparent picture, or use png24 png32 picture display pictures have a baby blue background in IE6 below.
solution:
.img{
background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');
}
img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}
or
<imgsrc="test.png" width="247" height="216"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');" alt="" />
16. <iframe> bug transparent background
Description: In the IE browser, <iframe> frame does not automatically set the background transparent
solution:
<iframesrc="content.html"allowTransparency="true"></iframe>
Set in content.html page in the iframe calls
body{}
16. disable IE default vertical scrollbar
solution:
html{
overflow:auto;
}
These are the common compatibility issues, here are some wonderful compatibility problems I encountered
1. When the cursor to set custom styles, different browser compatibility issues static cursor files of .cur
The probability of occurrence: Anyway, I ran into, life and death can not get out in the Firefox browser, the other perfect
If you write a sentence without problems, completely compatible. But is there one or two styles get out cursor, the cursor can be replaced by other display can be displayed properly, then congratulations, I met with exactly the same problem. .Cur file format is the problem
.cur formats produce different formats depending on the picture will be different color depths:
By changing the color depth, adjust the format, can achieve cross-browser compatible.
PS because I was not specifically engaged in the UI, also do not understand cur pictures, some cursor color depth of 256 colors in Firefox does not recognize, some you can, so to analyze specific issues, are looking to change to change, anyway, I'm here truecolor this depth All images are fully compatible.
The following will be attached a small piece of software making RealWorldCursorEditor cur cursor, you can use it to change the color depth
cursor: url (images / arrow.cur), auto; / * auto when the custom icon inoperative state of the mouse * /
2. IE6 at hide and seek
Description: In IE6 some items seem to be hidden, but the refresh will appear again, this is because a height of the container is bursting at the seams behind the floating element and followed by non-floating elements, and these elements have some non-floating defined: hover link.
Solution: remove all kinds of floating.